issue: [a11y] Header navigation has incorrect keyboard focus order (icons are focused before main nav items)

[anish-devgit]

Version Number

Docs website (v7 documentation, latest live version)

Codesandbox/Expo snack

Not applicable — issue is related to the documentation website UI (header focus order), not the library API. A reproduction Codesandbox is not relevant because the bug is only present on the live docs site.

Steps to reproduce

1. Go to https://react-hook-form.com/get-started

2. Press Tab from the top of the page

3. Observe the focus order in the header

4. The actual sequence becomes

   Search → Dark Mode Toggle → Discord Icon → X Icon → GitHub Icon → Home → Get Started → API → TS → Advanced → ...

5. This order does not match the visual layout of the navigation.

Expected behaviour

The keyboard focus order should follow the visual, logical navigation order:

Search → Dark Mode Toggle → Home → Get Started → API → TS → Advanced → FAQs → Tools → Resources → Releases → Discord → X → GitHub

This aligns with WCAG 2.4.3 (Focus Order), ensuring keyboard users access the main navigation before social/action icons.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No console errors — issue relates to incorrect keyboard focus order in the header.

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[anish-devgit]

Thanks for taking a look!
If you need any additional screenshots, a short video, or deeper debugging, I’m happy to help.
Also open to submitting a PR once the preferred approach is confirmed.

[BrendanC23]

You may want to file an issue for the docs repo. The navbar component is here.