LG-8398 Update screen reader to read headings after user searches for an address#7500
LG-8398 Update screen reader to read headings after user searches for an address#7500eileen-nava merged 2 commits intomainfrom
Conversation
NavaTim
left a comment
NavaTim
left a comment
There was a problem hiding this comment.
Might be nice to have a good test for this, but otherwise looks good.
| return ( | ||
| <> | ||
| <h3>{t('in_person_proofing.body.location.po_search.none_found', { address })}</h3> | ||
| <h3 role="status"> |
There was a problem hiding this comment.
It may behave differently depending on specific screen readers, so we could test to check, but my understanding of live regions is that they must be present on the page before adding the content that we want to be announce, since it's "live" in the sense that it announces changes to the content. Typically this would be at page load, but that's impractical for how our React application works.
The error container must be present in the DOM on page load for the error message to be spoken by most screen readers.
https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html#ARIA19-examples
If testing shows that this works okay as-is, maybe not worth worrying too much over. Otherwise, maybe we adjust the rendering so that the live region is always present (but non-visible) from beginning to end of the searching process, and we add the text once the result is available.
There was a problem hiding this comment.
This worked as-is on Mac Voiceover, but I didn’t test it with other screen readers. I’ll do a timeboxed investigation into testing it for other screen readers.
There was a problem hiding this comment.
Update: I tested on a second screen reader, the Chrome extension screen reader, and the code worked as is. I am going to merge this.
3 participants
🎫 Ticket
Update screen reader implementation
🛠 Summary of changes
If the user searches for an address on the "Select a location to verify your ID" page.....
📜 Testing Plan
👀 Screenshots
If relevant, include a screenshot or screen capture of the changes.
Screen recording of a search with results returned:
SearchReturnsResults_Reader.mov
Screen recording of a search with no results returned:
SearchReturnsNoResults_Reader.mov