Accordion Pattern

Behavior

There are two main parts of an accordion section:

• The header: which is used to control the display of the sections body
• The body: a container that holds any content associated to the section, which is either visible or hidden

Keyboard Interaction

• Each section header is focusable
• Enter and Space: when focused on a section header, should toggle the visibility of its body
• Recommended:
  • Up and Down arrows: when focused on a section header should navigate to the next/previous header.
  • This should not change the state of the section (if the section is hidden, it stays hidden).

Markup

The header should contain a <button /> element that:

• Has the header text within it
• Has aria-controls with the value set to the id of the body container that it controls and is associated with
• When the content is hidden aria-expanded should be set to "false"
• When the content is visible aria-expanded should be set to "true"
• If the section cannot be closed set aria-disabled="true" along with aria-expanded="true"

References

Usage in SLDS

• Accordion
• App Launcher
• Expandable Section