Build a keyboard-accessible accordion

Loading problem workspace…

Build a keyboard-accessible accordion · UIHero

Build a keyboard-accessible accordion

Implement an accordion with correct ARIA relationships and roving keyboard navigation.

EasyReact Accessibility

30 min0% acceptance

Description

Build an AccessibleAccordion whose headers expand related panels and participate in Arrow, Home, and End navigation. Disabled items remain discoverable but cannot toggle, and focus remains stable after state changes.

Requirements

The solution exports the required AccessibleAccordion API from the editable module.
Aria relationships works deterministically for the documented normal, boundary, and repeated-use scenarios.
Expand collapse works deterministically for the documented normal, boundary, and repeated-use scenarios.
Arrow navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Home end navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Disabled state works deterministically for the documented normal, boundary, and repeated-use scenarios.
Focus preserved works deterministically for the documented normal, boundary, and repeated-use scenarios.

Header navigation

Input

Focus the first header and press End

Expected output

Focus moves to the final enabled accordion header

Explanation

Accordion navigation follows the WAI-ARIA keyboard pattern without unexpectedly opening a panel.

Constraints

Use native buttons for headers
Connect each header and panel with stable unique IDs
Do not move DOM focus when expanding or collapsing

Hints

Hint 1

Keep open state separate from the index of the currently focused header.

Hint 2

Store header refs in item order so Arrow, Home, and End keys can move focus.

Hint 3

Let disabled buttons remain in the structure while excluding them from toggle behavior.

ReactARIAkeyboard navigation

Loading problem workspace…