From b4419cdeaa0b54f50f1a506b38900c6234e35d00 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 1 May 2026 05:10:28 +0000
Subject: [PATCH] chore(a11y): add aria-labels to icon-only buttons in graph
 tab

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..c45443c
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2024-05-01 - Adding ARIA labels to Icon-Only Buttons
+**Learning:** Found multiple icon-only buttons in the Graph Controls panel (Reset settings, Close panel, Delete group) that lacked `aria-label` attributes, relying solely on `title` or visual cues. This makes them inaccessible to screen reader users who need explicit labels for interactive elements.
+**Action:** Always include an `aria-label` attribute alongside the `title` attribute for icon-only `<Button>` components to ensure both visual hover tooltips and screen reader accessibility are supported.
diff --git a/src/components/graph-tab.tsx b/src/components/graph-tab.tsx
index 4b13707..b02a426 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="Delete group"
+                        aria-label="Delete group"
                         onClick={() => {
                           const next = panel.groups.filter(
                             (_, i) => i !== index,