Skip to content

Global Search - Header Search Aria Support

Zack Cuddy requested to merge 297396_05-gldropdown-topbar-a11y into master

Intro

This change is broken off from !66007 (closed)
Work towards #297396 (closed)

This change is behind a feature flag (:new_header_search)
Feature Flag Rollout Issue: #339348 (closed)

This end goal here is to replace the large deprecated jquery component used for the Header Search: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/search_autocomplete.js

Replacing it with GitLab UI will allow us to add features more effectively as well as true up the styles permanently by using the GitLab UI component.

What does this MR do?

This MR is the 6th and final MR in a series for a full refactor of the deprecated component mentioned above. Here we are adding screen reader and aria-tag support.

IMPORTANT: There are some known bugs that have follow up issues:

  • The NVDA experience on all browsers interrupts the aria-live reading yet it is displayed in the speech log. This means it never will say "5 default results provided..." (#346394)

  • The VoiceOver experience on Firefox ignores all aria-live changes. This means it never says any updated information about the search loading and its results. (#346391)

Here is a full roadmap for when the features were added: #297396 (comment 665578315)

Screenshots or Screencasts (strongly suggested)

Voiceover w/ Mac

VoiceOver_Mac

NVDA w/ Windows

NVDA_Windows

How to setup and validate locally (strongly suggested)

  1. Fetch and checkout this branch
  2. From your GDK terminal, access the rails console by typing rails c
  3. Enable the feature flag by typing Feature.enable(:new_header_search)
  4. Navigate to your GDK homepage (http://127.0.0.1:3000/)

How to activate Voiceover on Mac

  1. Open the "Accessibility" settings
  2. Click "VoiceOver" and check the box to activate it.

How to activate NVDA on Mac (w/ VirtualBox)

Follow this guide: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/nvda-setup.md

How to test

note: there are some known bugs listed above in the description dependent on your browser and screen reader

  1. Navigate to the header search using your keyboard and screen reader active
  2. Focus input
  3. Ensure it says that you are on an input
  4. Ensure it then says "5 Default items provided, use arrow keys..."
  5. Ensure it then says "Type for suggestions to appear..."
  6. Type a search
  7. Ensure it then says "Search is loading..."
  8. Browser dependent: ensure it says "${search} in all GitLab"
  9. Ensure it then says "X results updated. Use arrow keys..."

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Zack Cuddy

Merge request reports