Global Header Search - aria-live doesn't work with Voiceover x Firefox

What/Why

This bug will be/was introduced as part of the Header Search Refactor: !70222 (merged)

aria-live is a way to tell screen readers of dynamic content on the page. As a user searches the header search, results are updated and it is intended to articulate that to a user using the aide of a screen reader.

Current aria-live VoiceOver support

Browser Support
Safari ✅
Chrome ✅
Firefox ❌

This bug currently only affects Voiceover on Firefox. Since the standard on MacOS is Voiceover x Safari we we are comfortable merging the above listed MR with the knowledge that this bug currently will exist in production.

The bug consists of all aria-live changes are not announced to the user on Firefox. You will notice the aria-live been articulated in the expected behavior video below.

The missing speech in Firefox is:

  • {count} default results provided. Use the up and down arrow keys to navigate search results list.
  • Search results are loading
  • Results updated. {count} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.

Videos

Expected Behavior Error Firefox Behavior

Important Notes

Fixing this behavior comes with its own challenges as we have to be conscious of preserving the behavior on all supported browsers with both VoiceOver and NVDA. That means that when fixing this behavior we will also need confirm the preservation of support for the following combinations

Screen Reader Browser
NVDA Windows Edge
NVDA Windows Chrome
NVDA Windows Firefox
VoiceOver MacOS Safari
VoiceOver MacOS Chrome
VoiceOver MacOS Firefox

You can set up NVDA on your MacOS by following this guide: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/nvda-setup.md

cc/ @jeldergl

Edited by 🤖 GitLab Bot 🤖