Accordion — Accessibility Specification (WCAG 2.1 AA)

Unsynced state: header and panel visibility out of sync.
Focus jumps: toggling collapses focus to unpredictable places.

What is this component?

What is this component? Accordions show/hide sections of content. Buttons control disclosure of associated panels.

Requirement	WCAG Criteria	Description
Keyboard	2.1.1	Tab to headers; Space/Enter toggles; optional arrow navigation between headers.
State	4.1.2	Use `aria-expanded` on header buttons; panels reference headers.
Focus Visible	2.4.7	Provide visible focus on headers.

ARIA Role/Attribute	Used On	Purpose & Usage
`button[aria-expanded]`	Accordion headers	Controls visibility of panel.
`aria-controls` / `aria-labelledby`	Header/Panel	Bind header to panel and vice versa.



  


  Accessibility makes content usable by everyone.

Test Item	WCAG Criteria	Pass Criteria
State sync	4.1.2	AT hears expanded/collapsed correctly.
Keyboard	2.1.1	Space/Enter toggles; focus remains controlled.