{"id":13400627,"url":"https://github.com/springload/react-accessible-accordion","last_synced_at":"2025-05-14T23:07:57.901Z","repository":{"id":37734546,"uuid":"86394896","full_name":"springload/react-accessible-accordion","owner":"springload","description":"Accessible Accordion component for React","archived":false,"fork":false,"pushed_at":"2025-04-17T04:14:56.000Z","size":4770,"stargazers_count":789,"open_issues_count":29,"forks_count":115,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-14T23:07:45.366Z","etag":null,"topics":["accessibility","accessible","accordion","collapse","component","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"https://springload.github.io/react-accessible-accordion","language":"TypeScript","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/springload.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2017-03-27T23:47:10.000Z","updated_at":"2025-05-12T06:45:41.000Z","dependencies_parsed_at":"2024-06-18T12:16:04.937Z","dependency_job_id":"0b301e18-5310-4bf2-bdf7-3b344d6729e0","html_url":"https://github.com/springload/react-accessible-accordion","commit_stats":{"total_commits":860,"total_committers":29,"mean_commits":"29.655172413793103","dds":0.3534883720930233,"last_synced_commit":"041929b5d2905a1c188f86a2f8683ffc43463de1"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-accessible-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-accessible-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-accessible-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-accessible-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/react-accessible-accordion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243363,"owners_count":22038046,"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":["accessibility","accessible","accordion","collapse","component","hacktoberfest","react"],"created_at":"2024-07-30T19:00:54.059Z","updated_at":"2025-05-14T23:07:52.888Z","avatar_url":"https://github.com/springload.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized","TypeScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React [🔝](#readme)","Accessible Components \u0026 Libraries"],"sub_categories":["Collapse","Uncategorized"],"readme":"[react-accessible-accordion](https://springload.github.io/react-accessible-accordion/)\n[![npm](https://img.shields.io/npm/v/react-accessible-accordion.svg?style=flat-square)](https://www.npmjs.com/package/react-accessible-accordion)\n[![Accessibility status](https://img.shields.io/badge/a11y-tested-brightgreen.svg)](http://wave.webaim.org/report#/https://springload.github.io/react-accessible-accordion/)\n=========\n\n## Demo\n\n[Try a demo now](https://springload.github.io/react-accessible-accordion/).\n\n## Usage\n\nFirst, grab the package from npm:\n\n```sh\nnpm install --save react-accessible-accordion\n```\n\nThen, import the editor and use it in your code. Here is a\n[basic example](https://springload.github.io/react-accessible-accordion/):\n\n```jsx\nimport React from 'react';\n\nimport {\n    Accordion,\n    AccordionItem,\n    AccordionItemHeading,\n    AccordionItemButton,\n    AccordionItemPanel,\n} from 'react-accessible-accordion';\n\n// Demo styles, see 'Styles' section below for some notes on use.\nimport 'react-accessible-accordion/dist/fancy-example.css';\n\nexport default function Example() {\n    return (\n        \u003cAccordion\u003e\n            \u003cAccordionItem\u003e\n                \u003cAccordionItemHeading\u003e\n                    \u003cAccordionItemButton\u003e\n                        What harsh truths do you prefer to ignore?\n                    \u003c/AccordionItemButton\u003e\n                \u003c/AccordionItemHeading\u003e\n                \u003cAccordionItemPanel\u003e\n                    \u003cp\u003e\n                        Exercitation in fugiat est ut ad ea cupidatat ut in\n                        cupidatat occaecat ut occaecat consequat est minim minim\n                        esse tempor laborum consequat esse adipisicing eu\n                        reprehenderit enim.\n                    \u003c/p\u003e\n                \u003c/AccordionItemPanel\u003e\n            \u003c/AccordionItem\u003e\n            \u003cAccordionItem\u003e\n                \u003cAccordionItemHeading\u003e\n                    \u003cAccordionItemButton\u003e\n                        Is free will real or just an illusion?\n                    \u003c/AccordionItemButton\u003e\n                \u003c/AccordionItemHeading\u003e\n                \u003cAccordionItemPanel\u003e\n                    \u003cp\u003e\n                        In ad velit in ex nostrud dolore cupidatat consectetur\n                        ea in ut nostrud velit in irure cillum tempor laboris\n                        sed adipisicing eu esse duis nulla non.\n                    \u003c/p\u003e\n                \u003c/AccordionItemPanel\u003e\n            \u003c/AccordionItem\u003e\n        \u003c/Accordion\u003e\n    );\n}\n```\n\n### Styles\n\nWe strongly encourage you to write your own styles for your accordions, but\nwe've published the styles used on our demo page to help you get up and running:\n\n```js\nimport 'react-accessible-accordion/dist/fancy-example.css';\n```\n\nWe recommend that you copy them into your own app and modify them to suit your\nneeds, particularly if you're using your own `className`s.\n\n## Component API\n\n### Accordion\n\n#### allowMultipleExpanded : `boolean` [*optional*, default: `false`]\n\nDon't autocollapse items when expanding other items.\n\n#### allowZeroExpanded : `boolean` [*optional*, default: `false`]\n\nAllow the only remaining expanded item to be collapsed.\n\n#### preExpanded: `string[]` [_optional_, default: `[]`]\n\nAccepts an array of strings and any `AccordionItem` whose `uuid` prop matches\nany one of these strings will be expanded on mount.\n\n#### className : `string` [*optional*, default: `'accordion'`]\n\nClass(es) to apply to element.\n\n#### onChange : `(string[]) =\u003e void` [*optional*]\n\nCallback which is invoked when items are expanded or collapsed. Gets passed\n`uuid`s of the currently expanded `AccordionItem`s.\n\n---\n\n### AccordionItem\n\n#### className : `string` [*optional*, default: `accordion__item`]\n\nClass(es) to apply to element.\n\n#### uuid : `string|number` [*optional*]\n\nRecommended for use with `onChange`. Will be auto-generated if not provided.\n\n#### dangerouslySetExpanded: `boolean` [*optional*]\n\nEnables external control of the expansion.\n\n\u003e Warning: This may impact accessibility negatively, use at your own risk\n\n---\n\n### AccordionItemHeading\n\n#### className : `string` [*optional*, default: `'accordion__heading'`]\n\nClass(es) to apply to the 'heading' element.\n\n#### aria-level : `number` [*optional*, default: `3`]\n\nSemantics to apply to the 'heading' element. A value of `1` would make your\nheading element hierarchically equivalent to an `\u003ch1\u003e` tag, and likewise a value\nof `6` would make it equivalent to an `\u003ch6\u003e` tag.\n\n### AccordionItemButton\n\n#### className : `string` [*optional*, default: `'accordion__button'`]\n\nClass(es) to apply to the 'button' element.\n\n---\n\n### AccordionItemPanel\n\n#### className : `string` [*optional*, default: `'accordion__panel'`]\n\nClass(es) to apply to element.\n\n#### region: `boolean`\n\nMake the element have a region role.\n\n---\n\n### AccordionItemState\n\n#### children : `({ expanded: boolean, disabled: boolean }): JSX.Element` [**required**]\n\n---\n\n## Helpers\n\n### resetNextUuid : `(): void`\n\nResets the internal counter for Accordion items' identifiers (including `id`\nattributes). For use in test suites and isomorphic frameworks.\n\n---\n\n## Accessibility Best-Practice\n\nAuthoring an 'accordion' component to the\n[WAI ARIA spec](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) can be\ncomplex, but `React Accessible Accordion` does most of the heavy lifting for\nyou, including:\n\n-   Applying appropriate aria attributes (`aria-expanded`, `aria-controls`,\n    `aria-disabled`, `aria-hidden` and `aria-labelledby`).\n-   Applying appropriate `role` attributes (`button`, `heading`, `region`).\n-   Applying appropriate `tabindex` attributes.\n-   Applying keyboard interactivity ('space', 'end', 'tab', 'up', 'down', 'home'\n    and 'end' keys).\n\nHowever, there's still a couple of things you need to keep in mind to remain\nspec-compliant:\n\n-   Only ever use\n    [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content)\n    inside of your `AccordionItemHeading` component. If in doubt, use text only.\n-   Always provide an `aria-level` prop to your `AccordionItemHeading`\n    component, _especially_ if you are nesting accordions. This attribute is a\n    signal used by assistive technologies (eg. screenreaders) to determine which\n    heading level (ie. `h1`-`h6`) to treat your heading as.\n\nIf you have any questions about your implementation, then please don't be afraid\nto get in touch via our\n[issues](https://github.com/springload/react-accessible-accordion/issues).\n\n## FAQs\n\n### React 18?\n\nRAA supports React 18, and the new out-of-order streaming feature. See the\nCHANGELOG for details.\n\n### Which design patterns does this component aim to solve?\n\nThose described by the WAI ARIA spec's description of an 'accordion':\n\n\u003e An accordion is a vertically stacked set of interactive headings that each\n\u003e contain a title, content snippet, or thumbnail representing a section of\n\u003e content. The headings function as controls that enable users to reveal or hide\n\u003e their associated sections of content. Accordions are commonly used to reduce\n\u003e the need to scroll when presenting multiple sections of content on a single\n\u003e page.\n\n### Which design patterns does this component NOT aim to solve?\n\nComponents which are \"accordion-like\" but do not match the WAI ARIA spec's\ndescription, as written above. By \"accordion-like\", we mean components which\nhave collapsible items but require bespoke interactive mechanisms in order to\nexpand, collapse and 'disable' them. This includes (but is not limited to)\nmulti-step forms, like those seen in many cart/checkout flows, which we believe\nrequire (other) complex markup in order to be considered 'accessible'. This also\nincludes disclosure widgets.\n\n### How do I disable an item?\n\nSee \"Which design patterns does this component NOT aim to solve?\".\n\n## Browser Support\n\n**Supported browser / device versions:**\n\n| Browser       | Device/OS | Version |\n| ------------- | --------- | ------- |\n| Mobile Safari | iOS       | latest  |\n| Chrome        | Android   | latest  |\n| IE            | Windows   | 11      |\n| MS Edge       | Windows   | latest  |\n| Chrome        | Desktop   | latest  |\n| Firefox       | Desktop   | latest  |\n| Safari        | OSX       | latest  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-accessible-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Freact-accessible-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-accessible-accordion/lists"}