🎨 Palette: Add ARIA labels to icon-only buttons

.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.

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

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>

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"
                 >

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>