Accordion

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