{"id":13397991,"url":"https://github.com/timwright12/a11y-modal","last_synced_at":"2025-09-11T02:41:58.043Z","repository":{"id":145194472,"uuid":"68141986","full_name":"timwright12/a11y-modal","owner":"timwright12","description":"This plugin was created to help you implement accessible modal dialogs with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience.","archived":false,"fork":false,"pushed_at":"2016-10-03T14:57:48.000Z","size":21,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-07-31T18:24:39.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://timwright12.github.io/a11y-modal/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timwright12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-09-13T19:50:23.000Z","updated_at":"2022-11-01T21:17:37.000Z","dependencies_parsed_at":"2024-01-18T10:22:34.305Z","dependency_job_id":"d142e3e6-b420-4f6f-8824-a0f016f653d0","html_url":"https://github.com/timwright12/a11y-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timwright12/a11y-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwright12%2Fa11y-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwright12%2Fa11y-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwright12%2Fa11y-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwright12%2Fa11y-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timwright12","download_url":"https://codeload.github.com/timwright12/a11y-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwright12%2Fa11y-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274568780,"owners_count":25309283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T18:02:00.382Z","updated_at":"2025-09-11T02:41:58.025Z","avatar_url":"https://github.com/timwright12.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Accessible Modal Dialog\n\nThis plugin was converted from a jQuery plugin originally written by [@scottohara](https://github.com/scottaohara/). You can view the original code in [Scott's Accessible Component Library](https://github.com/scottaohara/accessible-components). Pretty much everything is the same, you just don't need jQuery.\n\nIt was created to help you implement accessible modal dialogs with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience. [Check out the demo](https://timwright12.github.io/a11y-modal/)\n\n## Example HTML You'll Need\n\n```html\n\u003ca href=\"#primary_modal\" data-action=\"modal-open\" data-modal-open=\"primary_modal\" data-set-modal-title=\"Test Title\"\u003e\n  Open Modal with a Link\n\u003c/a\u003e\n\n\u003cdiv id=\"primary_modal\" class=\"a11y-modal no-js-hide-modal\"\u003e\n  \u003cdiv class=\"modal\"\u003e\n  \n    \u003cdiv class=\"modal__intro\"\u003e\n      \u003ch3 id=\"small_modal_title\" data-modal-title class=\"modal__intro__title\"\u003eModal Heading\u003c/h3\u003e\n      Content\n    \u003c/div\u003e\u003c!--/.modal__intro--\u003e\n  \n    \u003cdiv class=\"modal__content\"\u003e\n      Content\n    \u003c/div\u003e\u003c!--/.modal__content--\u003e\n  \n    \u003cdiv class=\"modal__outro\"\u003e\n      \u003ca href=\"#x\" data-modal-close class=\"modal__outro__close\"\u003e\n      \u003cspan aria-hidden=\"true\"\u003e⨉\u003c/span\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\u003c!--/.modal__outro--\u003e\n  \n  \u003c/div\u003e \u003c!--/.modal--\u003e\n\u003c/div\u003e\u003c!--/.a11y-modal--\u003e\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b feature/my-new-feature`\n3. Commit your changes: `git commit -m 'Added some great feature!'`\n4. Push to the branch: `git push origin feature/my-new-feature`\n5. Submit a pull request\n\n## Credits\n\n- [Scott O'Hara](https://github.com/scottaohara/) ( [@scottohara](https://twitter.com/scottohara) )\n- [Tim Wright](http://github.com/timwright12) ( [@csskarma](http://twitter.com/csskarma) )\n\n## License\n\nCode and documentation are released under the MIT license.\n\n## Browser support\n\n| Feature       | Chrome | Firefox | Internet Explorer | Safari |\n|---------------|--------|---------|-------------------|--------|\n| Basic Support | Latest | Latest  | 9+                | 5.1+   |\n\nChrome and Firefox update too much to go back and test each version, if you need a certain on tested, just let me know. Or if there's a bug somewhere, feel free to file an issue and I'll fix it.\n\n## Further Reading\n\n- [Using ARIA role=dialog to implement a modal dialog box](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box)\n- [Managing Focus for Modal Dialogs](https://www.w3.org/WAI/GL/wiki/Managing_focus_for_modal_dialogs)\n- [Making Modal Windows Better For Everyone](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/)\n- [jQuery Accessible Modal Window](http://a11y.nicolas-hoffmann.net/modal/)\n- [The Incredible Accessible Modal Window](https://github.com/gdkraus/accessible-modal-dialog)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimwright12%2Fa11y-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimwright12%2Fa11y-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimwright12%2Fa11y-modal/lists"}