Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile nav: make background content inert. #4411

Merged
merged 8 commits into from
Dec 9, 2021

Conversation

mejiaj
Copy link
Contributor

@mejiaj mejiaj commented Nov 30, 2021

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.

@mejiaj mejiaj marked this pull request as ready for review December 1, 2021 17:27
@thisisdano thisisdano merged commit 8b9fd91 into develop Dec 9, 2021
@thisisdano thisisdano deleted the jm-a11y-mobile-nav-dialog branch December 9, 2021 18:28
@thisisdano thisisdano mentioned this pull request Dec 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mobile navigation dialog does not make background content inert
2 participants