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; }