Improve accessibility of accordion titles

Created on 1 March 2024, 9 months ago

Problem/Motivation

There are few acessibility issues with the accordion title:

  1. Screenreader - Accordion title is announced as link, when it is behaving as a button.
  2. Screenreader - Accordion title is missing aria-expanded to indicate visibility of content.
  3. Keyboard - Pressing spacebar while the title is active should toggle the visibility of the content.

There is a similar issue open πŸ“Œ Provide an accessible variant Needs review , but don't believe this is a duplicate. The focus of that issue is adding a variant system, with an optional accessible variant. However, accessibility improvements should be the default and not an optional add-on. I opened this issue to add the accessibility improvements in a backwards-compatible way.

Steps to reproduce

Keyboard:

  1. Tab to an accordion title and press the spacebar. The content doesn't toggle.

VoiceOver in Safari:

  1. Navigate to the accordion title, it's announced as a link
  2. Navigate to the accordion title and activate it. There's no feedback that content is revealed.

Proposed resolution

  • Add role="button" to title link
  • Add aria-expanded to title link, and update it based on accordion state
  • Toggle accordion when space bar is pressed on link

For the next major version it should be updated to use the semantic <button> element for the title.

πŸ› Bug report
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States hbrokmeier Wisconsin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024