Closed reitermb closed 1 year ago
@reitermb Can fully refine this ticket and tag Robert Jolly for review.
Videos demonstrating blank/missing reads via NVDA & JAWS
https://user-images.githubusercontent.com/28515874/193977379-3d4dcf0e-611e-4c69-bd5e-803484821413.mp4 https://user-images.githubusercontent.com/28515874/193977386-2f61e7d6-016e-4d4e-bc1c-f9199544f12f.mp4
As it can be seen in the picture: removing the aria-hidden="true"
corrected the issue.
@raftmsohani Please document and create new ticket for introduced defect on this ticket. Thank you!
Follow on tix #2307 has been created to address fix identified in this spike. Tix is ready to close.
Description
Nav items in the mobile/responsive version of TDP nav get ignored when NVDA (specific Windows-based screenreader) tries to read them. Possibly also affects Android's Talkback screenreader. We identified this issue during testing for #1937 but it also looked like it was introduced before then and just not caught.
Action Taken
Tab through mobile nav items (from close to sign out and back)
What I expected to see
Each item should be read aloud by the screenreader
What I did see
Screenshot of what NVDA was reading out. Each "tab" listed there represents a failed read of mobile nav menu items
What to try
We've identified a likely culprit for this issue:
<div id="root" aria-hidden="true" data-nav-hidden="">
Root having that aria-hidden cascades it to all elements on the page, including the sidenav. This property is basically a "please ignore this content" message to screen readers. Removing the aria-hidden from the root div or changing it to false should get us a working sidenav again!
Notes
My guess re: why the aria-hidden was added to begin with is to prevent screen readers in scan mode from reading outside of overlay elements on the page (e.g. the sidenav or timeout popups). Fixing this issue by removing or setting to false aria-hidden will result in screen readers being able to read page content while overlay elements are opened. This is also an issue that will need to be fixed, but it's a far less critical one than this issue.
If the above "What to try" is successful @reitermb will spin out a lower priority future enhancement to correct this less severe new issue (This will likely be a matter of adding more dynamically appearing aria-hidden="true" properties, just at lower levels of the page rather than the root level)