{"id":14990491,"url":"https://github.com/jgarber623/aria-collapsible","last_synced_at":"2025-04-12T02:23:45.118Z","repository":{"id":30916624,"uuid":"34474491","full_name":"jgarber623/aria-collapsible","owner":"jgarber623","description":"A dependency-free Web Component that generates progressively-enhanced collapsible regions using ARIA States and Properties.","archived":true,"fork":false,"pushed_at":"2025-03-31T15:47:24.000Z","size":595,"stargazers_count":65,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T02:23:39.841Z","etag":null,"topics":["a11y","accessibility","aria","custom-elements","customelements","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://codeberg.org/jgarber/aria-collapsible","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/jgarber623.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-23T18:37:00.000Z","updated_at":"2025-03-31T15:54:12.000Z","dependencies_parsed_at":"2023-12-21T06:22:48.176Z","dependency_job_id":"ee7cb614-6e20-4a85-9aa1-0afd0ac6eb60","html_url":"https://github.com/jgarber623/aria-collapsible","commit_stats":{"total_commits":140,"total_committers":3,"mean_commits":"46.666666666666664","dds":"0.40714285714285714","last_synced_commit":"fe31f2e86a53e661992e7c255a87c68fe7f39f2b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Faria-collapsible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Faria-collapsible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Faria-collapsible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Faria-collapsible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgarber623","download_url":"https://codeload.github.com/jgarber623/aria-collapsible/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506169,"owners_count":21115389,"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","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":["a11y","accessibility","aria","custom-elements","customelements","web-components","webcomponents"],"created_at":"2024-09-24T14:20:13.374Z","updated_at":"2025-04-12T02:23:45.110Z","avatar_url":"https://github.com/jgarber623.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!IMPORTANT]\n\u003e This project has moved to [codeberg.org/jgarber/aria-collapsible](https://codeberg.org/jgarber/aria-collapsible).\n\n# `\u003caria-collapsible\u003e` Web Component\n\n**A dependency-free [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) that generates progressively-enhanced collapsible regions using [ARIA States and Properties](http://www.w3.org/TR/wai-aria/states_and_properties).**\n\n[![npm](https://img.shields.io/npm/v/@jgarber/aria-collapsible.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/@jgarber/aria-collapsible)\n[![Downloads](https://img.shields.io/npm/dt/@jgarber/aria-collapsible.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/@jgarber/aria-collapsible)\n[![Build](https://img.shields.io/github/actions/workflow/status/jgarber623/aria-collapsible/ci.yml?branch=main\u0026logo=github\u0026style=for-the-badge)](https://github.com/jgarber623/aria-collapsible/actions/workflows/ci.yml)\n\n🐳 📖 **[See `\u003caria-collapsible\u003e` in action!](https://jgarber623.github.io/aria-collapsible/example)**\n\n\u003e [!NOTE]\n\u003e Prior to v7.0.0, this package exported a class, `Collapsible`, which offered similar functionality. If that better suits your needs, the legacy package is [available on npm](https://www.npmjs.com/package/aria-collapsible).\n\n## Getting `\u003caria-collapsible\u003e`\n\nYou've got several options for adding this Web Component to your project:\n\n- [Download a release](https://github.com/jgarber623/aria-collapsible/releases) from GitHub and do it yourself _(old school)_.\n- Install using [npm](https://www.npmjs.com/package/@jgarber/aria-collapsible): `npm install @jgarber/aria-collapsible --save`\n- Install using [Yarn](https://yarnpkg.com/en/package/@jgarber/aria-collapsible): `yarn add @jgarber/aria-collapsible`\n\n## Usage\n\nFirst, add this `\u003cscript\u003e` element to your page which defines the `\u003caria-collapsible\u003e` Web Component:\n\n```html\n\u003cscript type=\"module\" src=\"aria-collapsible.js\"\u003e\u003c/script\u003e\n```\n\nUse the `\u003caria-collapsible\u003e` custom element to wrap a `control` (typically, a `\u003cbutton\u003e` element) and one or more associated `region`s:\n\n```html\n\u003caria-collapsible\u003e\n  \u003cbutton control hidden\u003eToggle Menu\u003c/button\u003e\n\n  \u003cnav region\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"/articles\"\u003eArticles\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"/photos\"\u003ePhotos\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"/links\"\u003eLinks\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"/about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/aria-collapsible\u003e\n```\n\nWith the markup above, the Web Component will associate the control with one or more regions using the `aria-controls` attribute. For region elements without `id` attributes, unique values will be generated. Clicking the control element will alternatively show or hide the associate regions by toggling those element's `hidden` attribute.\n\n\u003e [!IMPORTANT]\n\u003e It's recommended that you include the `hidden` attribute on the control element. This attribute will prevent the control from being displayed until the Web Component initializes and removes the `hidden` attribute.\n\n\u003e [!IMPORTANT]\n\u003e It's recommended that the region element(s) immediately follow the control element in HTML source order. See the [Focus and Reading Order](https://adrianroselli.com/2020/05/disclosure-widgets.html#Order) section in [Disclosure Widgets](https://adrianroselli.com/2020/05/disclosure-widgets.html) for additional information.\n\nStyling the control and region elements is entirely up to you. Beyond the semantics of the `hidden` attribute and browsers' default styling, this Web Component is unstyled out of the box. Use your imagination. Get creative. The sky's the limit!\n\nIn addition to the above-mentioned Disclosure Widgets article, the Web Accessibility Initiative's [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) page provides additional examples where you may consider using this Web Component.\n\n## Optional Attributes\n\nThis Web Component supports a single Boolean attribute, `open`, that behaves similarly to the `\u003cdetails\u003e` element's [attribute of the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#open). The presence of the `open` attribute will show regions within the Web Component and set the control's `aria-expanded` attribute value to `true`.\n\nAn instance of `\u003caria-collapsible\u003e` may be opened or closed by programatically setting the `open` attribute or property:\n\n```html\n\u003caria-collapsible open\u003e\n  \u003cbutton control hidden\u003eToggle\u003c/button\u003e\n\n  \u003cdiv region\u003e\n    \u003cp\u003eI'm visible!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/aria-collapsible\u003e\n\n\u003cscript\u003e\n  // Close the Web Component by updating its `open` property.\n  document.querySelector(\"aria-collapsible\").open = false;\n\n  // Re-open the Web Component by setting its `open` attribute.\n  document.querySelector(\"aria-collapsible\").setAttribute(\"open\", \"any-value-here-works\");\n\u003c/script\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e Boolean attributes like `open` must be removed (either by using `removeAttribute` or setting the property to `false`). Because the attribute is a Boolean, `open=\"false\"` will display the Web Component's region's content.\n\n\u003e [!TIP]\n\u003e You might consider manipulating the `open` property in conjunction with [the `window.matchMedia`'s `change` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia#usage_notes).\n\n```js\nconst component = document.querySelector(\"aria-collapsible\");\nconst control = component.querySelector(\"[control]\");\n\nwindow.matchMedia(\"(width \u003e= 32rem)\").addEventListener(\"change\", (event) =\u003e {\n  component.open = event.matches;\n  control.toggleAttribute(\"hidden\", event.matches);\n});\n```\n\nThe code snippet above was inspired by the article, [Why you should use `window.matchMedia` when checking for window resizes in Javascript](https://webdevetc.com/blog/matchmedia-events-for-window-resizes/).\n\n## Events\n\nThe `\u003caria-collapsible\u003e` Web Component supports a `toggle` event which is dispatched whenever the component's `open` property changes. The event is sent after the control element's `aria-expanded` attributed and associated regions' `hidden` attributes are updated. This event is provided to authors who wish (or need!) to provide additional behavior or surface information to users based on this Web Component's state.\n\n## Acknowledgments\n\nThe following resources were used while making this Web Component:\n\n- [Disclosure Widgets](https://adrianroselli.com/2020/05/disclosure-widgets.html) by [Adrian Roselli](https://toot.cafe/@aardrian)\n- [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) by [The Web Accessibility Initiative](https://w3c.social/@wai)\n- [Making Web Component properties behave closer to the platform](https://blog.ltgt.net/web-component-properties/) by [Thomas Broyer](https://piaille.fr/@tbroyer)\n- [Let's create a Web Component from scratch!](https://gomakethings.com/lets-create-a-web-component-from-scratch/) and [The handleEvent() method is the absolute best way to handle events in Web Components](https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/) by [Chris Ferdinandi](https://mastodon.social/@cferdinandi)\n\n## License\n\nThe `\u003caria-collapsible\u003e` Web Component is freely available under the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgarber623%2Faria-collapsible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgarber623%2Faria-collapsible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgarber623%2Faria-collapsible/lists"}