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-hiddento background elementsnavigation.spec.js:113How to test
aria-hiddenordata-nav-hiddenattributes.usa-headersiblings getaria-hiddenanddata-nav-hiddenwhen 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
focusOuton 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 testand make sure the tests for the files you have changed have passed.