From 515e80bc85210be41b478524506ee83d8cbb50e5 Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com>
Date: Thu, 17 Sep 2026 04:30:43 -0600
Subject: [PATCH] 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>
---
 src/components/CopyButton.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 8cde0b0b2..52fcf6805 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -29,6 +29,8 @@ export function CopyButton({text, lang}: {text: string; lang: string}) {
 				</div>
 				<div className="relative">
 					<button
+						type="button"
+						aria-label={copied ? 'Copied' : 'Copy code'}
 						onClick={handleCopy}
 						onMouseEnter={() => setShowTooltip(true)}
 						onMouseLeave={() => setShowTooltip(false)}