Accessibility#9196

[maitxn]

What/Why

• Screen reader does not announce the search result information as No results on providing invalid input

Changes

• src/components/search.js

Add aria-live as polite to Box element

Add announce function to trigger screen reader announcing the No results message when there is no search result

Before

After

• The screen reader announces the search result information as No results on providing invalid input

References

• https://github.com/github/accessibility-audits/issues/9196

[leobalter]

I tried to use useEffect to resolve the first No result search but it doesn't seem to work this way. The issue is fixed as your suggested change but there is still one caveat failing on the first No result search

the code looks better and indeed the first No result is still ongoing but for Chromevox only.

Did you have a chance to try this with a different screenreader other than chromevox?

It works ok using VoiceOver (cmd+F5 on MacOS). I didn't test this on JAWS, NVDA, etc but I take the implementation seems correct (and Chromevox is the one failing).

[maitxn]

I tried to use useEffect to resolve the first No result search but it doesn't seem to work this way. The issue is fixed as your suggested change but there is still one caveat failing on the first No result search

the code looks better and indeed the first No result is still ongoing but for Chromevox only.

Did you have a chance to try this with a different screenreader other than chromevox?

It works ok using VoiceOver (cmd+F5 on MacOS). I didn't test this on JAWS, NVDA, etc but I take the implementation seems correct (and Chromevox is the one failing).

I have tested on NVDA and it shows the No results on the first try. It is also working ok using VoiceOver. Only chromevox is the one failing.

[maitxn]

@wraithgar FYI this PR got approved from @leobalter. Can you please merge it to prod?