Mobile nav: make background content inert. #4411
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Mobile navigation now makes background content inert. When the mobile navigation is active, all other non-nav content is hidden. This prevents accidentally leaving the focus of the active mobile menu. Closes #3527.
Additional information
aria-hidden
to background elementsnavigation.spec.js:113
How to test
aria-hidden
ordata-nav-hidden
attributes.usa-header
siblings getaria-hidden
anddata-nav-hidden
when active and disappear when menu is closed (via ESC, clicking close button, or clicking overlay).This work hides non-related header content from voiceover rotor. Now you can only jump to header items when the mobile navigation is active.
This does not resolve the CMD+L focus issue mentioned in the original report. Which happens on USA Modal active too. Checking for
focusOut
on the header results in other issues (like not being able to inspect the navigation). Doesn't seem worth the tradeoff.Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm test
and make sure the tests for the files you have changed have passed.