[a11y]: Dark/Light theme toggle is not reachable via keyboard (focus skips the toggle entirely)

[anish-devgit]

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

1. Go to: https://tanstack.com/query/latest/docs/framework/react/overview
2. Press Tab to start navigating the header
3. Focus moves through:
   • Menu icon
   • Logo
   • Search input
   • X icon
   • BlueSky icon
   • Instagram icon
   • Discord icon
4. Focus then jumps directly to the “Log In” button
5. The dark/light theme toggle is skipped entirely
6. 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.

[coderabbitai[bot]]

📝 CodeRabbit Plan Mode

Generate an implementation plan and agent prompts for this issue.

• [ ] Create Plan

Examples

• Example 1
• Example 2

🔗 Related PRs

TanStack/query#9806 - fix(devtools): Improve devtools accessibility by adding aria attributes, using semantic components and field labels [merged]

👤 Suggested Assignees

• mattcosta7

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

[anish-devgit]

If this issue is confirmed as valid, I’d be happy to open a PR to fix it. Let me know the preferred approach 🙌

[PalAman-git]

Would love to work on this issue and help to solve it.