USWDS - Header: Tab order does not match visual order in mobile view

[amyleadem]

Summary

The tab order in the mobile header menu does not currently match the visual order. In standard variants of the header, the search bar is visually at the top of the mobile menu but appears last in the tab order. This issue means that the component does not meet WCAG criterion 2.4.3 (Focus order).

Note that this does issue not happen in the extended variant of the component. In the extended variant, the search bar visually appears at the bottom of the mobile menu, which matches the tab order.

[mejiaj]

Todo

List possible approaches and mark for discussion.

[amyleadem]

Based on the conversation in dev sync on 8/6/24 (Google docs 🔒), we should remove the CSS order property on the .usa-nav__primary element.

This will cause a visual change where the search bar will now appear at the bottom of the menu, below the nav link list. We should include a note that lets users know that if they would like to visually keep the search bar at the top of the menu, they will need to reorder their markup in the mobile view.

[DavidCameron-USDA]

I think this is a duplicate of #3526.

[mejiaj]

Thanks for pointing that out @DavidCameron-USDA. This was recently caught and I've linked that issue to the PR that closes it.