navigation · @awesome-ds/react
Accordion
Native details/summary disclosure list.
State matrix
expanded
collapsed
Anatomy
- disclosure list
- summary buttons
- content regions
Keyboard contract
Enter or Space toggles the focused summary using native details behavior.
Screen-reader contract
Each summary exposes expanded state and precedes its associated content.
Content rules
- Summaries state what is revealed.
- Do not nest primary navigation in accordions.
Public API
| Prop | Type | required | Description |
|---|---|---|---|
items | AccordionItem[] | required | Disclosure sections |
Adaptation contracts
- RTL
- Follow document direction for directional keys and visuals while preserving semantic order.
- High contrast
- Current, selected, expanded, and focus states remain distinct without fill alone.
- Reduced motion
- Move selection and disclosure state without animated travel.
Verification IDs
Live
Live
Copyable example
import { Accordion } from "@awesome-ds/react";
<Accordion items={[{id:'1',title:'Q',content:'A'}]} />