From 98b9eb5107e54fcbf2ab619c28bfeb0415389b30 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 27 Apr 2026 05:40:17 +0000
Subject: [PATCH] feat(ux): Add ARIA labels to icon-only buttons for
 accessibility

- Add descriptive aria-label and title attributes to multiple icon-only buttons across the app
- Ensure settings page back button, code block controls, frontmatter editor actions, and graph tab buttons are accessible
- Address the accessibility gap where a title attribute alone is insufficient for screen readers
- Document learning regarding icon-only button accessibility in the Palette journal

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..0b05896
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-04-27 - [ARIA labels for icon-only buttons]
+**Learning:** In React components like `<Button size="icon">`, the presence of a `title` attribute is insufficient for comprehensive accessibility. Screen readers and assistive technologies require explicit `aria-label` attributes to reliably parse icon-only interactive elements.
+**Action:** Always include `aria-label` along with `title` when creating icon-only buttons to ensure they are accessible.
diff --git a/src/components/editor/extensions/code-block-codemirror.tsx b/src/components/editor/extensions/code-block-codemirror.tsx
index cbc217e..3bbf38f 100644
--- a/src/components/editor/extensions/code-block-codemirror.tsx
+++ b/src/components/editor/extensions/code-block-codemirror.tsx
@@ -447,6 +447,8 @@ const CodeMirrorComponent = ({
             <button
               type="button"
               className="flex items-center gap-1 focus:outline-none"
+              aria-label="Select language"
+              title="Select language"
             >
               {React.createElement("selectedcontent")}
               <HugeiconsIcon icon={ArrowDown01Icon} size={12} />
@@ -477,6 +479,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 +488,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..674abfd 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"
+                      aria-label={`Type: ${prop.type}`}
+                      title={`Type: ${prop.type}`}
                     >
                       <HugeiconsIcon
                         icon={
@@ -296,6 +298,8 @@ export function InlineFrontmatterEditor({
               size="icon"
               className="opacity-0 group-focus-within:opacity-100"
               onClick={() => removeProperty(index)}
+              aria-label={`Remove property ${prop.key || 'new property'}`}
+              title={`Remove property ${prop.key || 'new property'}`}
             >
               <HugeiconsIcon icon={Cancel01Icon} />
             </Button>
diff --git a/src/components/graph-tab.tsx b/src/components/graph-tab.tsx
index 4b13707..919fda2 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"
                 >
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index 726478d..786f8a1 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -191,7 +191,7 @@ function SettingsPage() {
       <div className="mx-auto max-w-2xl space-y-8">
         <div className="flex items-center gap-4">
           <Link to="/">
-            <Button variant="ghost" size="icon" type="button">
+            <Button variant="ghost" size="icon" type="button" aria-label="Go back" title="Go back">
               <HugeiconsIcon icon={ArrowLeft01Icon} className="h-5 w-5" />
             </Button>
           </Link>