#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, and aria-hidden attributes 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 useRef to 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

1. renders all items closed initially
2. opens an item when clicked
3. closes an item when clicked again
4. only one item stays open when multiple=false
5. multiple items can be open when multiple=true