Skip to content

Commit ac61900

Browse files
OmerDavidsonclaude
andcommitted
fix: show a focus outline on the copy button
`.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
1 parent de3427a commit ac61900

2 files changed

Lines changed: 10 additions & 1 deletion

File tree

.changeset/copy-button-focus.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@node-core/doc-kit-legacy': patch
3+
---
4+
5+
Show a focus outline on the code block copy button

packages/node-legacy/src/legacy-html/assets/style.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1032,7 +1032,6 @@ kbd {
10321032
}
10331033

10341034
.copy-button {
1035-
outline: none;
10361035
font-size: 10px;
10371036
color: #fff;
10381037
background-color: var(--green1);
@@ -1055,6 +1054,11 @@ kbd {
10551054
background-color: var(--green2);
10561055
}
10571056

1057+
.copy-button:focus-visible {
1058+
outline: 2px solid var(--color-text-primary);
1059+
outline-offset: 2px;
1060+
}
1061+
10581062
:root:not(.has-js) .copy-button {
10591063
display: none;
10601064
}

0 commit comments

Comments
 (0)