🎨 Palette: Add ARIA labels to icon-only buttons

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-23 - Accessibility of icon-only buttons
+**Learning:** Found multiple instances of icon-only buttons (`<Button>` and `<button>`) using `HugeiconsIcon` components that lacked `aria-label` attributes. While some had `title` attributes for tooltips, screen readers still need `aria-label` to announce the button's purpose clearly when focused.
+**Action:** Always verify that buttons containing only icons or visual elements have a descriptive `aria-label` added, even if a `title` attribute is present.

src/components/editor/extensions/code-block-codemirror.tsx

@@ -443,10 +443,12 @@ const CodeMirrorComponent = ({
             value={currentLanguage}
             onChange={(e) => handleLanguageChange(e.target.value)}
             className="language-select"
+            aria-label="Language Select"
           >
             <button
               type="button"
               className="flex items-center gap-1 focus:outline-none"
+              aria-label="Language Select"
             >
               {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/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="Delete group"
+                        aria-label="Delete group"
                         onClick={() => {
                           const next = panel.groups.filter(
                             (_, i) => i !== index,