[a11y] "Code" tab is not reachable via keyboard (focus skips directly to Stackblitz)

[anish-devgit]

Description

Summary:
On the Button component documentation page, the "Code" tab cannot be reached using keyboard navigation.
When tabbing through the example header, focus moves from ("Preview → directly to Stackblitz", skipping the "Code" tab completely.

This breaks expected focus order and makes the Code samples inaccessible for keyboard-only users.

Expected:
Focus order should follow the visual/DOM sequence:
"Preview → Code → Stackblitz"

Actual:
Focus order becomes:
"Preview → (skips Code) → Stackblitz"

Why this matters:
Keyboard-only and screen-reader users cannot access the Code tab, creating an accessibility issue (WCAG 2.4.3 – Focus Order).

Link to Reproduction

https://chakra-ui.com/docs/components/button

Steps to reproduce

1. Go to: https://chakra-ui.com/docs/components/button
2. Scroll to any example block containing "Preview / Code" tabs
3. Press Tab until focus lands on "Preview"
4. Press Tab again
5. Notice that focus skips the "Code" tab and moves directly to "Stackblitz"
6. Try Shift+Tab — Code still cannot receive focus

Chakra UI Version

3.30.0

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

This behavior occurs on multiple component documentation pages, suggesting it might be related to a shared docs UI component rather than a single page.

Happy to help test any fix or reproduce further if needed.

[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.