From c2d90d47c1e3f2ec1b51eeccaa09128a672059ef Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 25 Apr 2026 05:23:09 +0000
Subject: [PATCH] fix(a11y): add aria-labels to icon-only buttons

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..0642f7b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - [Add ARIA labels to icon-only buttons]
+**Learning:** Found multiple instances where icon-only buttons lacked an `aria-label` attribute (e.g. `title` attributes were present, but not `aria-label`). This causes screen readers to have a poor experience because they do not reliably read `title` attributes on interactive elements. This app uses `<Button size="icon">` and native `<button>` frequently for micro-actions, creating a recurrent a11y vulnerability.
+**Action:** When implementing new micro-actions in UI components, always ensure that `aria-label` is set explicitly on icon-only buttons regardless of the presence of `title` attributes.
diff --git a/src/components/editor/extensions/code-block-codemirror.tsx b/src/components/editor/extensions/code-block-codemirror.tsx
index cbc217e..df11796 100644
--- a/src/components/editor/extensions/code-block-codemirror.tsx
+++ b/src/components/editor/extensions/code-block-codemirror.tsx
@@ -477,6 +477,7 @@ const CodeMirrorComponent = ({
                 isLineWrapped ? "text-primary" : "text-muted-foreground",
               )}
               title="Toggle Line Wrap"
+              aria-label="Toggle Line Wrap"
             >
               <HugeiconsIcon icon={TextWrapIcon} size={14} />
             </button>
@@ -485,6 +486,7 @@ const CodeMirrorComponent = ({
               onClick={handleCopy}
               className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
               title="Copy Code"
+              aria-label="Copy Code"
             >
               {copied ? (
                 <HugeiconsIcon
diff --git a/src/components/frontmatter-editor.tsx b/src/components/frontmatter-editor.tsx
index 1e33ea0..0939ecd 100644
--- a/src/components/frontmatter-editor.tsx
+++ b/src/components/frontmatter-editor.tsx
@@ -178,6 +178,8 @@ export function InlineFrontmatterEditor({
                       className="[&_svg]:inline"
                       variant="ghost"
                       size="icon"
+                      title="Delete Icon"
+                      aria-label="Delete Icon"
                     >
                       <HugeiconsIcon
                         icon={
@@ -296,6 +298,8 @@ export function InlineFrontmatterEditor({
               size="icon"
               className="opacity-0 group-focus-within:opacity-100"
               onClick={() => removeProperty(index)}
+              title="Remove Property"
+              aria-label="Remove Property"
             >
               <HugeiconsIcon icon={Cancel01Icon} />
             </Button>
diff --git a/src/components/graph-tab.tsx b/src/components/graph-tab.tsx
index 4b13707..8b08df9 100644
--- a/src/components/graph-tab.tsx
+++ b/src/components/graph-tab.tsx
@@ -1319,6 +1319,7 @@ interface ForceGraphInstance {
                   variant="ghost"
                   size="icon"
                   title="Reset settings"
+                  aria-label="Reset settings"
                   onClick={() => setPanel(DEFAULT_PANEL)}
                   className="size-7"
                 >
@@ -1328,6 +1329,7 @@ interface ForceGraphInstance {
                   variant="ghost"
                   size="icon"
                   title="Close panel"
+                  aria-label="Close panel"
                   onClick={() => setPaneOpen(false)}
                   className="size-7"
                 >
@@ -1431,6 +1433,8 @@ interface ForceGraphInstance {
                       <Button
                         variant="ghost"
                         size="icon"
+                        title="Remove group"
+                        aria-label="Remove group"
                         onClick={() => {
                           const next = panel.groups.filter(
                             (_, i) => i !== index,