Accordion III

Make the accessible accordion keyboard-navigable per the ARIA Authoring Practices Guide: Arrow Up/Down move focus between the section headers, and Home/End jump to the first/last. Crucially — and unlike tabs — every header stays a normal Tab stop; the arrows are an addition on top of Tab, not a replacement.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The accessible accordion from before, now with Arrow/Home/End focus movement between headers.

Examples

focus a header, ArrowDown → focus next header (wraps last → first)
ArrowUp                   → focus previous header (wraps first → last)
Home / End               → first / last header
Tab                      → still moves through headers normally (no roving)
Enter / Space            → toggle the focused section (native button behaviour)

Arrows MOVE FOCUS between headers; they do not open/close.
Opening is still click / Enter / Space on the focused header.

Notes

• Arrows move focus, not state. ArrowUp/Down (and Home/End) only move focus between header buttons; toggling still happens on click / Enter / Space.
• No roving tabindex. Accordion headers are each independently operable, so they all stay in the tab order (every header is Tab-reachable). This is the key difference from tabs.
• Focus by ref. Keep a ref to each header button and call .focus() on the target; preventDefault the handled keys so the page doesn't scroll.
• Premium / hard. Adds refs + keyboard handling on top of the full ARIA accordion structure.