fix: ExtendedNav Tab Order

[bbemis017]

Summary

This PR re-orders the primary/secondary elements in the ExtendedNav so that it matches the visual order that a user sees. When a user uses Tabs through the component, they will iterate through elements in the same order that they appear

Related Issues or PRs

closes #2641

How To Test

Open Storybook locally and go to the Extended Header Page
Press Tab and confirm the first element focused is Simple line one
Then followed by
Simple link two
The search text box
The search button
Nav Label

Screenshots (optional)

Screen.Recording.2023-10-24.at.5.04.21.PM.mov

[brandonlenz]

Thanks for the PR! I'll wonder what the designers think about this.

We generally try to match whatever USWDS' implementation brings, for better (most of the time), or for worse.

Our markup before this change matches USWDS: https://designsystem.digital.gov/components/header/#extended-header

The USWDS example doesn't seem to include the secondary items in the tab order at all from a quick test (firefox), so that's puzzling to me as well

[bbemis017]

The USWDS example doesn't seem to include the secondary items in the tab order at all from a quick test (firefox), so that's puzzling to me as well

I'm not sure if I'm seeing the same behavior as you, But when I try it in firefox it skips over the links that are secondary items but it still focuses the search box and search button. Which are also secondary items in that example.

This is different than the behavior I see in chrome though, So I think theres a firefox setting that changes what is focusable. This stackoverflow seems related