Skip to content

fix: show a focus outline on the copy button - #1087

Open
OmerDavidson wants to merge 1 commit into
nodejs:mainfrom
OmerDavidson:fix-copy-button-focus
Open

fix: show a focus outline on the copy button#1087
OmerDavidson wants to merge 1 commit into
nodejs:mainfrom
OmerDavidson:fix-copy-button-focus

Conversation

@OmerDavidson

@OmerDavidson OmerDavidson commented Sep 5, 2026

Copy link
Copy Markdown

the copy button was not showing it was focused. making it inaccessible to keyboard users.
before:
image
image

after:
image
image

.copy-button set outline: none unconditionally, so the code block copy button was reachable by keyboard but gave no visible indication of focus.

This drops the blanket outline: none and draws an explicit ring on :focus-visible, so it appears for keyboard users without showing up on mouse clicks. The ring uses --color-text-primary, which is already theme-aware, so it contrasts against the code block in both light and dark mode.

`.copy-button` set `outline: none` unconditionally, so the button was
reachable by keyboard but gave no visible indication of focus. Drop it and
draw an explicit ring on `:focus-visible`, using `--color-text-primary` so it
contrasts in both light and dark mode.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01THEmqTTNhxu1QbR7isfQ5M
@OmerDavidson
OmerDavidson requested a review from a team as a code owner September 5, 2026 17:27
@vercel

vercel Bot commented Sep 5, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
api-docs-tooling Ready Ready Preview Sep 5, 2026 5:30pm UTC

Request Review

@OmerDavidson

Copy link
Copy Markdown
Author

Can someone trigger the ci?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants