Description

When tabbing through elements in the mobile menu navigation drawer, the tab order may not align to an expected order based on what is visually present on the page. The search field is shown visually toward the top of the drawer, but is last in the tab order. This can cause confusion for users who navigate using keyboard tabbing, or iOS VoiceOver / Android TalkBack gesture navigation.

Steps to reproduce the issue

1. Navigate to Basic Header demo
2. Shrink the page, or zoom in to the point where the mobile navigation styling is activated
3. Tab to and activate the menu button using Space
4. Observe that focus is placed on the "Close" button in the navigation drawer
5. Press Tab

Expected behavior: Focus is placed in the search field, as it is visually located immediately following the current active element
Actual behavior: Focus is placed in the navigation menu links. Continuing to press Tab, you will observe that the search field is last in the tab order

Additional information

Screen recording:

Relevant success criteria 2.4.3 Focus Order:

For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page. Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.

Relevant code, which places the navigation visually last, even if in markup it occurs before the search field:

Relevant "Accessibility concerns" guidance for order CSS:

Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

Note: This issue does not occur on the main USWDS website, only because the .usa-nav__primary on which the order styling is applied is wrapped by a .usa-nav__inner.

Possible remediation options:

• Search should be visually displayed the same as it is in markup order (i.e. remove order, allow search field to show at the bottom of the drawer)
• Search should be moved before the navigation links in the markup. Note that this could have adverse effects on the intended desktop styling.
• Search field should be programmatically moved to occur in the DOM prior to navigation links at smaller viewport sizes. Note that it's unclear if assistive technologies is accommodating to these programmatic changes.