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.
• App.tsx does not need to be modified, although you may edit it to test the multiple={true} behavior.
• You can use data to populate the accordion items.

Notes

• You may use useRef to measure the content height if you want to implement smooth CSS height transitions.
• Keep track of the open item(s) in state and update them when an item is toggled.
• Ensure proper accessibility: keyboard navigation should work and screen readers should correctly interpret the accordion state.
• You don’t need to pass an id to AccordionItem. React provides the useId hook for generating stable IDs.
• The prop types for Accordion and AccordionItem are already provided.
• You can use data to populate the accordion items.

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