Accessibility: Mobile navigation does not trap focus (USWDS)

[aduth]

For mobile users, or users who zoom the page to the point that mobile styles activate, the "Menu" button will present a dialog window for navigation and transition focus. However, focus is not constrained to the dialog and can escape to the rest of the page. This is in combination with a few other related issues noted below, all of which may not be specific to the Centers of Excellence website, but instead are inherited from its use of U.S. Web Design System.

Related issues:

• Mobile navigation tab order does not follow visual order uswds/uswds#3526
• Mobile navigation dialog does not make background content inert uswds/uswds#3527
• Active navigation does not close when focus moves outside uswds/uswds#3528

Steps to Reproduce:

1. Navigate to https://coe.gsa.gov/
2. Shrink the page or zoom to the point that mobile styles activate
3. Tab to the "Menu" button
4. Click the "Menu" button by pressing Space
5. Tab through the navigation items, and continue tabbing

Expected behavior: Tabbing is constrained to the navigation dialog.
Actual behavior: Tabbing escapes the dialog and continues to navigate the page.

Relevant Guidance:

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Tab [...] When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.

Remediation Guidance:

USWDS mobile navigation does include focus trapping behavior (uswds/uswds#2347). It could be that this is not taking place because one of either:

• An outdated version of USWDS is being used.
• Improper usage of USWDS is preventing the behavior from taking effect.

[ryanwoldatwork]

I believe the update USWDS modal addresses this.

[aduth]

Yeah, I just tested this again and it's still an issue. I think the remediation guidance from my initial comment still holds true in terms of a resolution.