Krafters UI 1.4.7

Accordion pattern

"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content."

Source: ARIA Design Patterns

AccordionDetails

This component uses the native <details> element.

Accordion with HTML

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Accordion

Custom accordion component that uses CSS for smooth animations.

Accessibility Requirements

  • The accordion trigger is a button element.
  • Each accordion header button is wrapped in an element with role heading.
  • The trigger element has the aria-expanded attribute. The value should align with the open state of the Accordion Panel.
  • The trigger element has the aria-controls attribute. The value should refer to the ID of the Accordion Panel element.
  • If the Accordion Panel contains focussable elements when using the <Accordion> component, you should set tabindex="-1" on the focussable elements when they are hidden.