From fe76c8ee2c7893de2be07309dca749007a4a9b90 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 16 May 2026 09:05:20 +0000
Subject: [PATCH] Add ARIA labels to icon-only buttons

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 .jules/palette.md                              |  0
 webui/components/sidebar/chats/chats-list.html |  4 ++--
 webui/components/sidebar/tasks/tasks-list.html | 13 +++++++------
 webui/index.html                               | 16 ++++++++--------
 4 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/webui/components/sidebar/chats/chats-list.html b/webui/components/sidebar/chats/chats-list.html
index f331d0b003..a0e8240f35 100644
--- a/webui/components/sidebar/chats/chats-list.html
+++ b/webui/components/sidebar/chats/chats-list.html
@@ -32,8 +32,8 @@ <h3 class="section-header">Chats</h3>
                   <span class="chat-name"
                     x-text="context.name ? context.name : 'Chat #' + context.no"></span>
                 </div>
-                <button class="btn-icon-action chat-list-action-btn" title="Close chat" @click.stop="$confirmClick($event, () => $store.chats.killChat(context.id))">
-                  <span class="material-symbols-outlined">close</span>
+                <button class="btn-icon-action chat-list-action-btn" title="Close chat" aria-label="Close chat" @click.stop="$confirmClick($event, () => $store.chats.killChat(context.id))">
+                  <span class="material-symbols-outlined" aria-hidden="true">close</span>
                 </button>
               </div>
             </li>
diff --git a/webui/components/sidebar/tasks/tasks-list.html b/webui/components/sidebar/tasks/tasks-list.html
index 2dc6c08337..09079c0b4b 100644
--- a/webui/components/sidebar/tasks/tasks-list.html
+++ b/webui/components/sidebar/tasks/tasks-list.html
@@ -41,15 +41,16 @@
                         <div class="task-actions">
                           <button class="btn-icon-action"
                                   @click.stop="$store.tasks.openDetail(task.id)"
-                                  title="View task details">
-                            <span class="material-symbols-outlined">Info</span>
+                                  title="View task details"
+                                  aria-label="View task details">
+                            <span class="material-symbols-outlined" aria-hidden="true">Info</span>
                           </button>
-                          <button class="btn-icon-action" title="Clear task chat"
+                          <button class="btn-icon-action" title="Clear task chat" aria-label="Clear task chat"
                                   @click.stop="$confirmClick($event, () => $store.tasks.reset(task.id))">
-                            <span class="material-symbols-outlined">delete_sweep</span>
+                            <span class="material-symbols-outlined" aria-hidden="true">delete_sweep</span>
                           </button>
-                          <button class="btn-icon-action" title="Delete task" @click.stop="$confirmClick($event, () => $store.tasks.deleteTask(task.id))">
-                            <span class="material-symbols-outlined">close</span>
+                          <button class="btn-icon-action" title="Delete task" aria-label="Delete task" @click.stop="$confirmClick($event, () => $store.tasks.deleteTask(task.id))">
+                            <span class="material-symbols-outlined" aria-hidden="true">close</span>
                           </button>
                         </div>
                       </div>
diff --git a/webui/index.html b/webui/index.html
index abb457f125..4ea4c41ba5 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -102,17 +102,17 @@
 
               <!-- Chat Navigation Buttons (floating over chat area) -->
               <div id="chat-nav-buttons" aria-label="Chat navigation" x-cloak>
-                <button class="btn-icon-action" title="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
-                  <span class="material-symbols-outlined">vertical_align_top</span>
+                <button class="btn-icon-action" title="Scroll to top" aria-label="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
+                  <span class="material-symbols-outlined" aria-hidden="true">vertical_align_top</span>
                 </button>
-                <button class="btn-icon-action" title="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
-                  <span class="material-symbols-outlined">keyboard_arrow_up</span>
+                <button class="btn-icon-action" title="Previous user message" aria-label="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
+                  <span class="material-symbols-outlined" aria-hidden="true">keyboard_arrow_up</span>
                 </button>
-                <button class="btn-icon-action" title="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
-                  <span class="material-symbols-outlined">keyboard_arrow_down</span>
+                <button class="btn-icon-action" title="Next user message" aria-label="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
+                  <span class="material-symbols-outlined" aria-hidden="true">keyboard_arrow_down</span>
                 </button>
-                <button class="btn-icon-action" title="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
-                  <span class="material-symbols-outlined">vertical_align_bottom</span>
+                <button class="btn-icon-action" title="Scroll to bottom" aria-label="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
+                  <span class="material-symbols-outlined" aria-hidden="true">vertical_align_bottom</span>
                 </button>
               </div>
             </div>