Description

With collapsible navigation menu items, the contents can be shown by activating the menu accordion, at which point the user can Tab through the navigation options. Once the user has tabbed through all of the available options and proceeds to the next tabbable element on the page, the menu remains open. This may be unexpected, and is at least inconsistent with existing behavior to dismiss the active navigation menu when clicking on the page body.

Steps to reproduce the issue

1. Navigate to Basic Header demo
2. Tab through page contents to "Current section" collapsible menu
3. Press Space to expand menu items
4. Press Tab tab to proceed through menu items, until options are exhausted and then focus moves to the next "Section" navigation menu

Expected behavior: The "Current section" expanded menu should be closed.
Actual behavior: The "Current section" expanded menu remains open.

Additional information

There could be a counter-argument here that focus transitions should not be used to signal a change in the expanded state of the menu. There is conflicting advice on this point.

As pictured, whether that menu is open or closed should be communicated with aria-expanded. You should only change this state on click, not on focus. Users do not usually expect an explicit change of state on a mere focus event.

https://inclusive-components.design/menus-menu-buttons/

In this case, the submenu is opened by a script when the user activates the top-level item and closed when the focus leaves the submenu.

https://www.w3.org/WAI/tutorials/menus/flyout/#use-parent-as-toggle

In any case, there already appears to be some handling of this in dismissing the active menu when clicking somewhere on the page, seemingly intending to capture a similar sort of focusout behavior.

Possible remediation options:

• Remove click-to-dismiss behavior
• Update behavior of menu to dismiss active menu when focus leaves

Relevant code: https://github.com/uswds/uswds/blob/develop/src/js/components/navigation.js

I began some initial exploration of a possible fix. It's worth noting that the use of an event delegation library makes this more difficult in how ideally this would be implemented as the distinction between blur and focusout (i.e. blur of the navigation menu or its parent, but not within the same wrapper). See also:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
• https://www.npmjs.com/package/receptor