{"id":15425155,"url":"https://github.com/scottaohara/aria_disclosure_widget","last_synced_at":"2026-02-07T12:01:56.030Z","repository":{"id":45278297,"uuid":"86382076","full_name":"scottaohara/aria_disclosure_widget","owner":"scottaohara","description":"Progressively enhanced hide/show content areas with vanilla JS \u0026 appropriate ARIA attributes","archived":false,"fork":false,"pushed_at":"2022-08-09T19:06:01.000Z","size":73,"stargazers_count":37,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-26T20:31:52.196Z","etag":null,"topics":["accessibility","aria","details-summary-alternative","disclosure-widget","toggle-buttons"],"latest_commit_sha":null,"homepage":"https://scottaohara.github.io/aria_disclosure_widget/","language":"HTML","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/scottaohara.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}},"created_at":"2017-03-27T20:42:00.000Z","updated_at":"2025-07-23T17:39:27.000Z","dependencies_parsed_at":"2022-08-04T13:15:31.807Z","dependency_job_id":null,"html_url":"https://github.com/scottaohara/aria_disclosure_widget","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/scottaohara/aria_disclosure_widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria_disclosure_widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria_disclosure_widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria_disclosure_widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria_disclosure_widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottaohara","download_url":"https://codeload.github.com/scottaohara/aria_disclosure_widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria_disclosure_widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29194004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["accessibility","aria","details-summary-alternative","disclosure-widget","toggle-buttons"],"created_at":"2024-10-01T17:50:03.133Z","updated_at":"2026-02-07T12:01:56.015Z","avatar_url":"https://github.com/scottaohara.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ARIA Disclosure Widgets  \n\nA disclosure widget consists of a trigger (`\u003cbutton\u003e`) that toggles the hidden state of its associated content.  \n\nCheck out the [demo page](https://scottaohara.github.io/aria_disclosure_widget/) for markup patterns and variations.\n\n\n## How does it work?  \n\nUse either a `\u003cdisclosure-inline\u003e` (for `display: inline-block`) or `\u003cdisclosure-block\u003e` (for `display: block`) custom element wrapping element.\n\nWhichever wrapping element used, it MUST contain a `\u003cdisclosure-content\u003e` element. This element represents the content you want to show/hide. \n\nThe minimal expected markup pattern for this script to work is as follows:\n```html\n\u003cdisclosure-block\u003e \u003c!-- or disclosure-inline --\u003e\n  \u003cdisclosure-content\u003e\n    ...\n  \u003c/disclosure-content\u003e\n\u003c/disclosure-block\u003e\n```\n\n### The trigger\n\nA `\u003cbutton\u003e` element to toggle the `\u003cdisclosure-content\u003e` will be auto generated by the script. Use the `data-trigger` attribute on the `\u003cdisclosure-inline\u003e` or `\u003cdisclosure-block\u003e` element to provide this element a visible label and its accessible name.  If the `data-trigger` attribute is not specified, the generated `\u003cbutton\u003e` will render a fallback label of \"More info\".\n\n```html\n\u003cdisclosure-inline data-trigger=\"Unique name goes here\"\u003e\n  \u003cdisclosure-content\u003e\n    ...\n  \u003c/disclosure-content\u003e\n\u003c/disclosure-inline\u003e\n```\n\nIf you want more control over the placement of the generated `\u003cbutton\u003e` element, and thus also include additional structured and semantic content to your disclosure widget, then you can use the `data-insert-trigger` to specify the element where the `\u003cbutton\u003e` will be generated.  The content of the chosen element will become the content of the `\u003cbutton\u003e` element.\n\n```html\n\u003cdisclosure-block\u003e\n  \u003ch5 data-insert-trigger\u003e\n    \u003cimg src=... alt\u003e\n    \u003cspan\u003eVisible text label\u003c/span\u003e\n  \u003c/h5\u003e\n  \u003cdisclosure-content\u003e\n    ...\n  \u003c/disclosure-content\u003e\n\u003c/disclosure-block\u003e\n```\n\nPer the above markup, the `\u003cbutton\u003e` will be insterted into the `\u003ch5\u003e` element.  The resulting markup will render as follows:\n```html\n\u003ch5 ...\u003e\n  \u003cbutton aria-expanded=...\u003e\n    \u003cimg ...\u003e\n    \u003cspan\u003eVisible text label\u003c/span\u003e\n  \u003c/button\u003e\n\u003c/h5\u003e\n```\n\nAlternatively, the `\u003cbutton\u003e` can be injected into another element as an inline trigger. This will render the `\u003cbutton\u003e` with only the down arrow/chevron icon, and use an `aria-label=\"More info\"` to provide it an accessible name.  Consider the following markup:\n\n```html\n\u003cdisclosure-inline\u003e\n  \u003ch5\u003e\n    My topic here\n    \u003cspan data-insert-trigger=\"inline\"\u003e\u003c/span\u003e\n  \u003c/h5\u003e\n  ...\n\u003c/disclosure-inline\u003e\n```\n\nThe resulting markup will render as follows:\n```html\n\u003ch5\u003e\n  My topic here\n  \u003cspan ...\u003e\n    \u003cbutton ... aria-expanded=\"...\" aria-label=\"More info\"\u003e\u003c/button\u003e\n  \u003c/span\u003e\n\u003c/h5\u003e\n```\n\n\n### Other options\n\nThe following attributes are available to use on the wrapping `\u003cdisclosure-block\u003e` or `\u003cdisclosure-inline\u003e` element:\n* `data-open` – Use to open a disclosure widget by default.\n* `data-disabled` - Will add a `disabled` attribute to the generated `\u003cbutton\u003e`.\n* `data-left-align` - Will render the down arrow / chevron on the left of the `\u003cbutton\u003e`, rather than the default right position.\n* `data-popup` - The `\u003cdisclosure-content\u003e` will be displayed as a faux \"popup\". If keyboard focus is detected outside of the widget, the popup content will auto-collapse and the `\u003cbutton\u003e` will return to the `aria-expanded=false` state. When identified as a \"popup\", the content panel will be provided a `tabindex=-1` and a `role=note`. Comments describing why are provided in the JavaScript file.\n\n\n## Keyboard controls\n\nThe `\u003cbutton\u003e` element allows for default \u003ckbd\u003eSpace\u003c/kbd\u003e and \u003ckbd\u003eEnter\u003c/kbd\u003e keys to toggle the expanded and collapsed state of the associated content.\n\nIf the disclosure widget is rendered as a popup, then the \u003ckbd\u003eEsc\u003c/kbd\u003e key can be used to collapse the content if focus is on the `\u003cbutton\u003e` element, or within the expanded disclosure widget content container.  Pressing \u003ckbd\u003eEsc\u003c/kbd\u003e will return focus to the `\u003cbutton\u003e` element of the disclosure widget.\n\n\n## License \u0026 such  \nThis script was written by [Scott O'Hara](https://twitter.com/scottohara).\n\nIt has an [MIT license](https://github.com/scottaohara/accessible-components/blob/master/LICENSE.md).\n\nDo with it what you will :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottaohara%2Faria_disclosure_widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottaohara%2Faria_disclosure_widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottaohara%2Faria_disclosure_widget/lists"}