Skip to main content

toBeAccessibleAccordion()

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.

Usage​

The toBeAccessibleAccordion matcher should be called on the HTML element wrapped around the interactive headings and their content. It will find each accordion header item and verify that it has role="button" and is wrapped in a heading element.

Syntax​

To use the matcher pass a valid HTML element to the expect function and verify its DOM output and keyboard interactions with toBeAccessibleAccordion().

import { render, screen } from '@testing-library/react'

test('accordion', () => {
  render(<Accordion id="accordion">...</Accordion>)

  expect(screen.getByTestId('accordion')).toBeAccessibleAccordion()
})

Test Summary​

The toBeAccessibleAccordion matcher will loop through the accordion items and test the following for each:

  •  element is wrapped in an element with role heading
  •  element is wrapped in an element with aria-level
  •  element has attribute aria-controls
  •  aria-expanded toggled on Enter
  •  aria-expanded toggled on Space

Known Limitations​

There are many ways in which an element can be hidden in the UI. Because of this, there is no consistent way for us to test whether the value of the aria-expanded tag is in sync with the visibility of its content panel.

Not tested

If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded="true". If the panel is not visible, aria-expanded is set to false.

WAI-ARIA Roles, States, and Properties​

Each accordion item will be composed of the following:

  • A heading element.
  • A button element.
  • A content element.

The elements will be checked for the following when passed through the matcher:

  • The title of each accordion item is contained in a button element.
  • Each button is wrapped in a heading that has a value set for aria-level that is appropriate for the information architecture of the page
  • The button has aria-controls set to the ID of the content element.
  • If the content associated with an accordion item is visible, the button element has aria-expanded="true". If the panel is not visible, aria-expanded="false".

Keyboard Interaction​

Each button element in an accordion should be part of the tab sequence and can be activated with the keyboard to show or hide its contents.

  • The button can receive focus.
  • When the button has focus, Space or Enter toggles aria-expanded on the button and the visibility of the content.
  • If the content is visible, and the user presses Tab, focus will move to the first tabbable element within the content.

Playground​

Test out the DOM structure of an accordion element here:

Note

This Playground does not test any keyboard interactions

Accordion
<div className="accordion">

  <h3>

    <button aria-controls="panel-1">

      Accordion Item 1

    </button>

    <div id="panel-1"></div>

  </h3>

</div>


      Tests: 0 passed, 0 total

    External Resources​

    Web Accessibility Initiative​