Skip to content

Accordion

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Enter, SpaceWhen focus is on the accordion header of a collapsed section, expands the section.

Roles and attributes

The following list describes roles and attributes that component already has.

Roles and attributes
Component / elementRole & attributesUsage
Accordion.Item.ToggleButtonrole="button"Defines element as clickable and can be activated by user, and controls the visibility of accordion's content panel.
aria-expanded="true"Set to true when the accordion panel is expanded, otherwise set to false.
aria-controls="IDREF"Points to the ID of the panel which the toggle button controls.
Accordion.Item.Chevronaria-hidden="true"Hides non-interactive icon from the assistive technologies.
Accordion.Item.CollapseregionCreates a landmark region that contains the currently expanded accordion panel.
aria-labelledby="IDREF"Defines the accessible name for the region element. References the Accordion.Item.ToggleButton that expands and collapses the region.

Considerations for designers & developers

By default, Accordion.Item.Toggle is set to an h3 heading level, but you can change it if needed. Refer to our example.

Resources

Other recommendations

For more accessibility recommendations, refer to the common Accessibility guide.

Last updated:

Released under the MIT License.

Released under the MIT License.