feat: add focus-visible styles to home page buttons and code blocks.#1069
feat: add focus-visible styles to home page buttons and code blocks.#1069connorshea wants to merge 3 commits intooxc-project:mainfrom
Conversation
Adds keyboard-focus outlines to the Get Started, View on GitHub, and Usage Guide buttons on the home page so they have a visible indicator when navigated to via the tab key.
✅ Deploy Preview for oxc-project ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Adds a visible keyboard focus indicator to the home/landing page “button” links by introducing a :focus-visible outline style in the VitePress theme stylesheet.
Changes:
- Add global
.button:focus-visibleoutline + offset styling using the site brand color.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| .button:focus-visible { | ||
| outline: 2px solid var(--color-brand); |
There was a problem hiding this comment.
The new .button:focus-visible rule uses var(--color-brand), but that CSS variable is only defined under :root[data-variant="oxc"] selectors. If data-variant is ever missing/changed (or this CSS is reused for a different variant), the outline declaration becomes invalid and focus styles disappear. Consider switching to the already-used VitePress brand token (--vp-c-brand-1) or adding a fallback like var(--color-brand, var(--vp-c-brand-1)) to keep focus indicators reliable and consistent with other components (e.g. RulesTable.vue).
| outline: 2px solid var(--color-brand); | |
| outline: 2px solid var(--color-brand, var(--vp-c-brand-1)); |
Adds a keyboard-focus outline to code-group tab labels so users can see which tab is focused when navigating with the tab key.
Outline the entire code-group block when a tab is keyboard-focused instead of only the individual tab label.
connorshea
changed the title
After briefly checking the theme side, I noticed that while the |
Adds keyboard-focus outlines to the Get Started, View on GitHub, and Usage Guide buttons on the home page so they have a visible indicator when navigating with keyboard.
It's a bit hard to see when not actively using the page, but basically the "Get Started" button has an additional focus outline now when focused, same thing for other buttons that lacked focus styles here:
The code blocks with tabs have also been updated accordingly, to make it easier to tell when the code block is focused and tabs can be interacted-with:
This was generated with Claude Code, it may be worth making this change universally in the VoidZero theme, but I don't have any ability to do that, so that'd be up to someone else to do :)