Spike: Attempt fix a11y reads for collapsed nav menu

reitermb commented 2 years ago

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)