Accordion
Accordion is a component of a list that unfolds and collapses information.
Accordion follows the WAI-ARIA - Accordion Pattern for accessibility.
Keyboard Navigation
| Key | Description | State |
|---|---|---|
Tab | Focuses the first item when focus moves to the accordion. Focuses the next item if already within the accordion. | - |
Shift + Tab | Focuses the previous item that is not disabled. | - |
ArrowUp | Focuses the previous item that is not disabled. If it's the first item, focuses the last item that is not disabled. | - |
ArrowDown | Focuses the next item that is not disabled. If it's the last item, focuses the first item that is not disabled. | - |
Space, Enter | Expands the panel of the focused item. | - |
| Expands the panel of the focused item and collapses it if it is already expanded. | isMultiple={true}, isToggle={true} | |
Home | Focuses the first item that is not disabled. | - |
End | Focuses the last item that is not disabled. | - |
ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
|---|---|---|
AccordionLabel | role="heading" | Indicates that it is a heading. |
aria-level="3" | Indicates that it is at hierarchy level 3. | |
aria-disabled="true" | Sets to "true" when the panel of the item is expanded. However, if Accordion is set with isMultiple={true} or isToggle={true} and AccordionItem is not disabled, it does not become "true" as it can be collapsed. | |
id | Used to associate with AccordionPanel. | |
aria-controls | Sets the id of the associated AccordionPanel. | |
aria-expanded | Sets to "true" when the panel of the item is expanded, and "false" when it is collapsed. | |
AccordionPanel | role="region" | Indicates that it is a landmark region. |
id | Used to associate with AccordionLabel. | |
aria-labelledby | Sets the id of the associated AccordionLabel. |
Edit this page on GitHub