#08Accessible Accordion
Overview
Build an accessible accordion component that uses semantic headings and buttons, manages aria-expanded/aria-controls, supports smooth height transitions, and allows either single-section or multiple-section open modes.
Requirements
- Render all accordion items closed initially.
- Open an item when its header button is clicked.
- Close an item when its header button is clicked again.
- If
multiple=false, ensure only one item can be open at a time. - If
multiple=true, allow multiple items to be open simultaneously. - Manage proper
aria-expanded,aria-controls, andaria-hiddenattributes for accessibility. - Support smooth height transitions when opening and closing items.
Notes
- Use semantic
<h2>and<button>elements for headers to improve accessibility. - Consider using
useRefto measure content height for smooth CSS transitions. - Keep track of open items in state and update accordingly when toggling.
- Ensure that keyboard navigation and screen readers can correctly interpret the accordion’s state.
Tests
- renders all items closed initially
- opens an item when clicked
- closes an item when clicked again
- only one item stays open when multiple=false
- multiple items can be open when multiple=true