{"id":11644,"library":"react-accessible-accordion","title":"React Accessible Accordion","description":"react-accessible-accordion is a React component library providing a WAI-ARIA compliant accordion interface. The current stable version is 5.0.1. While it provides robust accessibility features for accordions, the project is officially no longer maintained, with the developers strongly recommending the use of native HTML `
` and `` elements for new implementations due to their superior performance, framework-agnostic nature, and built-in accessibility. Releases have been infrequent, primarily addressing bug fixes or adapting to new React versions, rather than active feature development. Key differentiators historically included its out-of-the-box WAI-ARIA compliance and a component-based API for building accordions within React applications, but these are now largely superseded by native browser capabilities. It ships with TypeScript types for improved developer experience.","status":"abandoned","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/springload/react-accessible-accordion","tags":["javascript","react","component","accordion","collapse","accessible","accessibility","wai-aria","aria","typescript"],"install":[{"cmd":"npm install react-accessible-accordion","lang":"bash","label":"npm"},{"cmd":"yarn add react-accessible-accordion","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-accessible-accordion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primary container component for the accordion.","wrong":"const Accordion = require('react-accessible-accordion').Accordion;","symbol":"Accordion","correct":"import { Accordion } from 'react-accessible-accordion';"},{"note":"Represents an individual expandable/collapsible item within the Accordion. All core components are named exports.","wrong":"import AccordionItem from 'react-accessible-accordion/AccordionItem';","symbol":"AccordionItem","correct":"import { AccordionItem } from 'react-accessible-accordion';"},{"note":"The library does not include default styles; this path imports a demo stylesheet that can be used as a starting point. It's recommended to copy and customize these styles or write your own.","wrong":"import './node_modules/react-accessible-accordion/dist/fancy-example.css';","symbol":"styles","correct":"import 'react-accessible-accordion/dist/fancy-example.css';"}],"quickstart":{"code":"import React from 'react';\nimport {\n Accordion,\n AccordionItem,\n AccordionItemHeading,\n AccordionItemButton,\n AccordionItemPanel,\n} from 'react-accessible-accordion';\n\n// Optional: Import demo styles, or create your own.\nimport 'react-accessible-accordion/dist/fancy-example.css';\n\nexport default function BasicAccordionExample() {\n // Configure accordion behavior with props like allowMultipleExpanded and allowZeroExpanded\n return (\n \n \n \n \n What is React?\n \n \n \n

\n React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.\n

\n \n \n \n \n \n Why use an accessible accordion?\n \n \n \n

\n Accessible accordions ensure that all users, including those using assistive technologies, can easily navigate and interact with collapsed and expanded content.\n

\n \n \n \n );\n}","lang":"typescript","description":"Demonstrates a basic accessible accordion with two expandable items, using named imports for components and an optional demo stylesheet. It also explicitly shows `uuid` for consistent IDs, although often automatically generated."},"warnings":[{"fix":"For new implementations, consider using native `
` and `` HTML elements. For existing projects, be aware that active development and new features are unlikely.","message":"The project is officially 'no longer maintained' by its creators. They strongly recommend using native HTML `
` and `` elements for new implementations due to their inherent performance, accessibility, and framework-agnostic benefits.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"If `role=\"region\"` is still desired for specific use cases, add the `region` boolean prop directly to the `AccordionItemPanel` component (e.g., ``).","message":"Starting with v4.0.0, the `AccordionItemPanel` component no longer includes `role=\"region\"` by default. This change was based on WAI-ARIA guidelines, as `region` is often redundant and can clutter the accessibility tree.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure your React environment is compatible with the `useId` hook if you are targeting specific React 18 features. For older React versions, peer dependencies `^16.3.2 || ^17.0.0 || ^18.0.0` still allow usage, but be mindful of potential SSR hydration issues specific to `useId` if encountering them.","message":"Version 5.0.0 introduced React 18 support, leveraging the `useId` hook for improved out-of-order streaming. While this primarily adds compatibility, it might imply certain expectations or behaviors when integrating with older React versions or complex server-side rendering setups if not handled carefully.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Copy the contents of `fancy-example.css` into your project and adapt them, or create entirely new styles for your accordion components. Importing `react-accessible-accordion/dist/fancy-example.css` is only a quick way to get some basic visual feedback.","message":"The library provides minimal to no default styling. The `fancy-example.css` stylesheet is intended for demonstration purposes only and should not be used in production directly without modification. Developers are expected to provide their own styles.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add the `region` boolean prop to your `AccordionItemPanel` component (e.g., ``) to re-enable the role.","cause":"The `role=\"region\"` attribute on `AccordionItemPanel` was removed by default in v4.0.0.","error":"Accessibility features like `role=\"region\"` are missing on accordion panels"},{"fix":"Ensure that any `id` props provided manually are unique and adhere to HTML5 ID naming conventions. If not providing IDs, ensure the library's automatic ID generation functions correctly without conflicts, especially in complex or dynamic rendering scenarios.","cause":"The accordion components, particularly `AccordionItemHeading` or `AccordionItemButton`, were likely passed `id` props that are not valid HTML5 IDs, or duplicate IDs were generated/provided.","error":"console.error: Provided with invalid HTML5 ids"},{"fix":"Verify the import statement `import 'react-accessible-accordion/dist/fancy-example.css';` is correct. If issues persist, manually locate the file in `node_modules` or download its contents and include it directly in your project.","cause":"The path to the demo stylesheet is incorrect, or the file is not available in the expected location (e.g., due to build issues or incorrect `node_modules` structure).","error":"Module not found: Can't resolve 'react-accessible-accordion/dist/fancy-example.css' in ..."}],"ecosystem":"npm"}