Accessible Accordion Component

Problem Statement

Accordions are a staple UI component, but they are frequently built in a way that excludes keyboard and screen-reader users. We need a reusable, dynamic accordion component in React that displays a list of collapsible panels.

When a user interacts with the accordion:

1. They should be able to click on a panel header to expand it while collapsing other panels.
2. The UI must react instantly and handle smooth height transitions when shifting between collapsed and expanded states.
3. The component must support full keyboard control and broadcast its state semantically via ARIA attributes.

Requirements

Functional

• Dynamic Content: Accept an array of items, each containing a title (ReactNode) and a content (ReactNode).
• Toggle Expansion: Clicking a header toggles that section between expanded and collapsed. Expanding one section should automatically collapse the currently expanded section (single-panel accordion).
• Keyboard Navigation:
  • Focus should move between panel headers using the Tab key.
  • Pressing Space or Enter on a focused header toggles its expansion state.
  • Pressing Arrow Down moves focus to the next panel header.
  • Pressing Arrow Up moves focus to the previous panel header.
  • Pressing Home moves focus to the first panel header.
  • Pressing End moves focus to the last panel header.
• ARIA Semantic Attributes:
  • The header trigger must be a <button> or have role="button".
  • Set aria-expanded (true/false) on the header trigger representing its current state.
  • Link the header trigger to the content container using aria-controls matching the panel content's id.
  • Define aria-labelledby on the content container pointing to the header's id.
  • Set role="region" on the content container to indicate a landmarked section.

Non-Functional

• Ensure smooth visual transition of panel heights without layout jumps.
• Expose clean, strongly typed props in TypeScript.
• Strictly enforce focus boundaries so off-screen panel text is not focusable or interactive while collapsed.

Concepts Tested

• React state arrays and index selection logic.
• Focus management and keyboard accessibility (Event listener mapping).
• DOM manipulation using refs to control focus flow.
• CSS transition properties and max-height/grid layout styles.