From 5deaf384f241b1b681bdb00c7aa4a723e8383b95 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 30 Apr 2026 05:35:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[a11y]=20add=20aria-l?=
 =?UTF-8?q?abels=20to=20code=20block=20icon=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added `aria-label`s to the "Select language", "Toggle line wrap", and "Copy code" buttons in the code block component.
🎯 Why: These buttons previously only had icons (and sometimes a `title`), which is insufficient for screen readers. Providing an explicit `aria-label` ensures keyboard and assistive tech users know what the buttons do.
♿ Accessibility: Improved screen reader announcements for the code block interactive controls.

Co-authored-by: threehymns <70611435+threehymns@users.noreply.github.com>
---
 .Jules/palette.md                                          | 3 +++
 src/components/editor/extensions/code-block-codemirror.tsx | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..6de802f
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Missing Aria Labels on Icon-only Buttons
+**Learning:** Found several icon-only buttons across components (e.g., Code block language selector, copy, wrap toggle, search dialog results, slash command list, graph tab controls) lacking `aria-label`s, which impacts screen reader accessibility. Some have `title` but `aria-label` is crucial.
+**Action:** Always verify `aria-label` is present on any `<button>` element that only contains icons without visible text.
diff --git a/src/components/editor/extensions/code-block-codemirror.tsx b/src/components/editor/extensions/code-block-codemirror.tsx
index cbc217e..895d00e 100644
--- a/src/components/editor/extensions/code-block-codemirror.tsx
+++ b/src/components/editor/extensions/code-block-codemirror.tsx
@@ -446,6 +446,7 @@ const CodeMirrorComponent = ({
           >
             <button
               type="button"
+              aria-label="Select language"
               className="flex items-center gap-1 focus:outline-none"
             >
               {React.createElement("selectedcontent")}
@@ -471,6 +472,7 @@ const CodeMirrorComponent = ({
           <div className="flex items-center gap-1 border-border border-l pl-2">
             <button
               type="button"
+              aria-label="Toggle line wrap"
               onClick={toggleLineWrapping}
               className={cn(
                 "rounded p-1 transition-colors hover:bg-accent",
@@ -482,6 +484,7 @@ const CodeMirrorComponent = ({
             </button>
             <button
               type="button"
+              aria-label="Copy code"
               onClick={handleCopy}
               className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
               title="Copy Code"