Skip to main content

Accordion

The Accordion component can be used to group information, reveal and hide content.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles​

  • Do verify the trigger has a clear, descriptive accessible name that reflects what will expand.

Keyboard accessibility and focus​

Accordion handles focus management out of the box. When a section is expanded or collapsed, focus stays on the trigger. The user tabs into the revealed content when ready.

  • Do verify the revealed content appears immediately after the trigger in reading order, so Tab moves into it naturally.
  • Do verify the content is fully hidden from assistive technology when collapsed if the keepMounted prop is active. (In the default version, Accordion.Content is automatically removed from the DOM when collapsed.)
  • Don't move focus into the revealed content on activation. Doing so would suppress the state announcement and screen reader users wouldn't know that the content opened.

State announcements​

Accordion handles state announcements out of the box: aria-expanded="true" when expanded; aria-expanded="false" when collapsed.

  • Do ensure that the revealed content follows in a logical tab order so users can navigate into it after the state is announced.
Still have questions?
Find answers in the Dynatrace Community