Global Header Search - aria-live interrupted by input focus with NVDA
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 NVDA support in Header Search
| Browser | Support |
|---|---|
| Edge | |
| Chrome | |
| Firefox |
This bug currently only affects NVDA with All Browsers. Since everything else works as expected with both VoiceOver and NVDA we we are comfortable merging the above listed MR with the knowledge that this bug currently will exist in production.
This bug consists of aria-live being interrupted by input focus in NVDA but does not on VoiceOver. Since the dropdown is first updated when a user focuses the input, the initial aria-live ({count} default results provided. Use the up and down arrow keys to navigate search results list.) is skipped. All other aria-live events while interacting with the dropdown do work as expected.
The missing speech is:
{count} default results provided. Use the up and down arrow keys to navigate search results list.
Videos
| Expected Behavior | Error NVDA 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