[a11y]: Dark/Light theme toggle is not reachable via keyboard (focus skips the toggle entirely) #9958
Description
Describe the bug
On the TanStack Query documentation site, the dark/light theme toggle cannot be reached using keyboard navigation.
When navigating with the Tab or Shift+Tab keys, focus moves through several header icons but completely skips the theme toggle. This makes the toggle inaccessible for keyboard-only users and violates WCAG 2.4.3 (Focus Order).
Your minimal, reproducible example
This issue occurs directly on the official documentation page: https://tanstack.com/query/latest/docs/framework/react/overview No sandbox reproduction is required, as this is an accessibility issue on the live docs UI.
Steps to reproduce
- Go to: https://tanstack.com/query/latest/docs/framework/react/overview
- Press Tab to start navigating the header
- Focus moves through:
- Menu icon
- Logo
- Search input
- X icon
- BlueSky icon
- Instagram icon
- Discord icon
- Focus then jumps directly to the “Log In” button
- The dark/light theme toggle is skipped entirely
- Press Shift+Tab — the toggle is still not reachable
Expected behavior
The dark/light theme toggle should be reachable via keyboard (Tab and Shift+Tab) in logical navigation order and should display a visible focus outline.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
OS: Windows 11
Browser: Chrome (latest)
Tanstack Query adapter
None
TanStack Query version
v5 (Docs website)
TypeScript version
Not applicable
Additional context
Happy to assist with further debugging or testing if needed.
Open to submitting a PR once the preferred implementation approach is confirmed.