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

• Uses the same technique as USA Modal by adding aria-hidden to background elements
• Adds a unit test to test that non-header content is hidden to screenreaders in navigation.spec.js:113

How to test

1. Go to Kitchen sink example
2. Resize to get mobile menu
3. Inspect content and ensure there aren't any aria-hidden or data-nav-hidden attributes
4. Toggle the menu
5. Verify .usa-header siblings get aria-hidden and data-nav-hidden when active and disappear when menu is closed (via ESC, clicking close button, or clicking overlay).

⚠️Note
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:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.