From 6d9c24194e8b3ad6cd519493f77beaaf8d2a48a1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 17 May 2026 08:50:02 +0000
Subject: [PATCH] Add aria-labels to icon-only buttons

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 .jules/palette.md                                    |  3 +++
 .../components/modals/image-viewer/image-viewer.html | 12 ++++++------
 webui/components/plugins/plugin-configs.html         |  4 ++--
 webui/components/plugins/toggle/plugin-toggles.html  |  4 ++--
 webui/components/settings/skills/list.html           |  4 ++--
 5 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..8532f5b566
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-03-25 - Add ARIA Labels to Icon-Only Buttons
+**Learning:** Found several icon-only buttons across settings, tools and modals without aria-labels making them inaccessible to screen readers.
+**Action:** Adding standard aria-label attributes that match their titles to improve accessibility.
diff --git a/webui/components/modals/image-viewer/image-viewer.html b/webui/components/modals/image-viewer/image-viewer.html
index 9fd5e02e41..8aff26188b 100644
--- a/webui/components/modals/image-viewer/image-viewer.html
+++ b/webui/components/modals/image-viewer/image-viewer.html
@@ -44,14 +44,14 @@
 
                 <!-- Fixed zoom controls - OUTSIDE the canvas -->
                 <div class="zoom-controls">
-                    <button type="button" @click="$store.imageViewer.zoomOut()" class="button zoom-btn">
-                        <span class="icon material-symbols-outlined">zoom_out</span>
+                    <button type="button" @click="$store.imageViewer.zoomOut()" class="button zoom-btn" aria-label="Zoom out" title="Zoom out">
+                        <span class="icon material-symbols-outlined" aria-hidden="true">zoom_out</span>
                     </button>
-                    <button type="button" @click="$store.imageViewer.resetZoom()" class="button zoom-btn">
-                        <span class="icon material-symbols-outlined">home</span>
+                    <button type="button" @click="$store.imageViewer.resetZoom()" class="button zoom-btn" aria-label="Reset zoom" title="Reset zoom">
+                        <span class="icon material-symbols-outlined" aria-hidden="true">home</span>
                     </button>
-                    <button type="button" @click="$store.imageViewer.zoomIn()" class="button zoom-btn">
-                        <span class="icon material-symbols-outlined">zoom_in</span>
+                    <button type="button" @click="$store.imageViewer.zoomIn()" class="button zoom-btn" aria-label="Zoom in" title="Zoom in">
+                        <span class="icon material-symbols-outlined" aria-hidden="true">zoom_in</span>
                     </button>
                 </div>
             </div>
diff --git a/webui/components/plugins/plugin-configs.html b/webui/components/plugins/plugin-configs.html
index 5715d73c01..894f68cad4 100644
--- a/webui/components/plugins/plugin-configs.html
+++ b/webui/components/plugins/plugin-configs.html
@@ -52,8 +52,8 @@
                                     <span class="icon material-symbols-outlined">list</span>
                                     Show
                                 </button>
-                                <button type="button" class="button cancel icon-button" title="Delete" @click="$confirmClick($event, () => context.deleteConfig(cfg.project_name || '', cfg.agent_profile || ''))">
-                                    <span class="icon material-symbols-outlined">delete</span>
+                                <button type="button" class="button cancel icon-button" title="Delete" aria-label="Delete" @click="$confirmClick($event, () => context.deleteConfig(cfg.project_name || '', cfg.agent_profile || ''))">
+                                    <span class="icon material-symbols-outlined" aria-hidden="true">delete</span>
                                 </button>
                             </div>
                         </div>
diff --git a/webui/components/plugins/toggle/plugin-toggles.html b/webui/components/plugins/toggle/plugin-toggles.html
index 5f45caca49..9ea811c1be 100644
--- a/webui/components/plugins/toggle/plugin-toggles.html
+++ b/webui/components/plugins/toggle/plugin-toggles.html
@@ -50,8 +50,8 @@
                                     <span class="icon material-symbols-outlined">edit</span>
                                     Edit
                                 </button>
-                                <button type="button" class="button cancel icon-button" title="Delete" @click="$confirmClick($event, () => $store.pluginToggle.deleteConfig(cfg.path))">
-                                    <span class="icon material-symbols-outlined">delete</span>
+                                <button type="button" class="button cancel icon-button" title="Delete" aria-label="Delete" @click="$confirmClick($event, () => $store.pluginToggle.deleteConfig(cfg.path))">
+                                    <span class="icon material-symbols-outlined" aria-hidden="true">delete</span>
                                 </button>
                             </div>
                         </div>
diff --git a/webui/components/settings/skills/list.html b/webui/components/settings/skills/list.html
index 3914537121..e4a0aa184b 100644
--- a/webui/components/settings/skills/list.html
+++ b/webui/components/settings/skills/list.html
@@ -75,9 +75,9 @@
                                         @click="$store.skillsListStore.openSkill(skill)">
                                         <span class="icon material-symbols-outlined">folder_open</span> Open
                                     </button>
-                                    <button type="button" class="button cancel icon-button" title="Delete"
+                                    <button type="button" class="button cancel icon-button" title="Delete" aria-label="Delete"
                                         @click="$confirmClick($event, () => $store.skillsListStore.deleteSkill(skill))">
-                                        <span class="icon material-symbols-outlined">delete</span>
+                                        <span class="icon material-symbols-outlined" aria-hidden="true">delete</span>
                                     </button>
                                 </div>
                             </div>