Skip to content

Commit b6ddbbf

Browse files
a11y: Label the code-block copy button
The copy button on code blocks had no accessible name, so screen readers announced an unlabelled button. Add an aria-label that flips to Copied, and type=button so it never submits a surrounding form. Found by the docs site audit in https://ampcode.com/threads/T-01a0ae50-f7f0-779c-aa66-3887c9953e33 Amp-Thread-ID: https://ampcode.com/threads/T-01a0aed2-5fbe-7768-85ea-1378bf98f9ff Co-authored-by: Amp <amp@ampcode.com>
1 parent 1e29a19 commit b6ddbbf

1 file changed

Lines changed: 2 additions & 0 deletions

File tree

‎src/components/CopyButton.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export function CopyButton({text, lang}: {text: string; lang: string}) {
2929
</div>
3030
<div className="relative">
3131
<button
32+
type="button"
33+
aria-label={copied ? 'Copied' : 'Copy code'}
3234
onClick={handleCopy}
3335
onMouseEnter={() => setShowTooltip(true)}
3436
onMouseLeave={() => setShowTooltip(false)}

0 commit comments

Comments
 (0)