Dropdown > Accessibility Audit

Refer to the parent epic description for more information on this effort.

Purpose

Audit the accessibility of the GitLab UI Dropdown component in all variants and states in order to provide more documentation on the component’s page in Pajamas and address any items that need fixed.

Initial methods and tools

Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.

Methods

  • Visual scan
  • Code/semantics review
  • Keyboarding text
  • Screen reader test

Tools

  • NVDA + Chrome version 92
  • VoiceOver + Safari

Audit criteria

Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic.

A completed task here indicates that testing has been done, not that the result was passing.

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.

Results

Watch recordings of the audit (internal)

  1. ▶︎ Intro
  2. ▶︎ Visual scan
  3. ▶︎ Code and semantic review
  4. ▶︎ Screen reader demo
Problem Solution Related Issue/MR
From the visual scan, I don't think there are any large issues, but I would like to consider the focus ring in general based on potential forthcoming WCAG updates. This article summarizes it well. Explore global updates to the focus ring.
In general, the way the dropdown is currently built is too prescriptive to a menu and is not appropriate for all of the use cases a dropdown should support. This will be explained further in the related issue. There are also issues with the code semantics/structure of the current dropdown. Provide examples of different types of dropdowns, along with semantic differences, that support each type of use case.

Completing the audit

After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.

accessibility ~"Category:FE/UX Foundations" component:dropdown

Edited by Jeremy Elder