From ac619008646c702e64f0254fec33fb4f556c0fe9 Mon Sep 17 00:00:00 2001 From: omer Date: Sat, 5 Sep 2026 20:27:24 +0300 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_01THEmqTTNhxu1QbR7isfQ5M --- .changeset/copy-button-focus.md | 5 +++++ packages/node-legacy/src/legacy-html/assets/style.css | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/copy-button-focus.md diff --git a/.changeset/copy-button-focus.md b/.changeset/copy-button-focus.md new file mode 100644 index 000000000..2632a0d3f --- /dev/null +++ b/.changeset/copy-button-focus.md @@ -0,0 +1,5 @@ +--- +'@node-core/doc-kit-legacy': patch +--- + +Show a focus outline on the code block copy button diff --git a/packages/node-legacy/src/legacy-html/assets/style.css b/packages/node-legacy/src/legacy-html/assets/style.css index 9a80797b3..a877251f9 100644 --- a/packages/node-legacy/src/legacy-html/assets/style.css +++ b/packages/node-legacy/src/legacy-html/assets/style.css @@ -1032,7 +1032,6 @@ kbd { } .copy-button { - outline: none; font-size: 10px; color: #fff; background-color: var(--green1); @@ -1055,6 +1054,11 @@ kbd { background-color: var(--green2); } +.copy-button:focus-visible { + outline: 2px solid var(--color-text-primary); + outline-offset: 2px; +} + :root:not(.has-js) .copy-button { display: none; }