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 loadingResults 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