From 8bbab8ac18b233e06be0f7df0e8b15f2e2bd34dc Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 28 May 2026 08:52:45 +0000
Subject: [PATCH] Add ARIA labels to icon-only buttons

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 webui/components/sidebar/chats/chats-list.html |  6 +++---
 webui/components/sidebar/tasks/tasks-list.html | 12 ++++++------
 webui/index.html                               | 16 ++++++++--------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/webui/components/sidebar/chats/chats-list.html b/webui/components/sidebar/chats/chats-list.html
index 2c13755fc8..69cd5bc304 100644
--- a/webui/components/sidebar/chats/chats-list.html
+++ b/webui/components/sidebar/chats/chats-list.html
@@ -15,7 +15,7 @@
           <h3 class="section-header">Chats</h3>
           <!-- New Chat Button -->
           <button id="newChat" class="btn-icon-action chat-list-action-btn" @click="$store.chats.newChat()" aria-label="New Chat" title="New Chat" data-bs-placement="top" data-bs-trigger="hover">
-            <span class="material-symbols-outlined">chat_add_on</span>
+            <span class="material-symbols-outlined" aria-hidden="true">chat_add_on</span>
           </button>
           <x-extension id="chats-header-controls"></x-extension>
         </div>
@@ -33,8 +33,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" aria-label="Close chat" title="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..2cf116346e 100644
--- a/webui/components/sidebar/tasks/tasks-list.html
+++ b/webui/components/sidebar/tasks/tasks-list.html
@@ -39,17 +39,17 @@
                               :class="task.state ? `scheduler-status-${task.state}` : 'scheduler-status-idle'"
                               x-text="task.state || 'idle'"></span>
                         <div class="task-actions">
-                          <button class="btn-icon-action"
+                          <button class="btn-icon-action" aria-label="View task details"
                                   @click.stop="$store.tasks.openDetail(task.id)"
                                   title="View task details">
-                            <span class="material-symbols-outlined">Info</span>
+                            <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" aria-label="Clear task chat" title="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" aria-label="Delete task" title="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 95973c79e0..c75320691f 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -104,17 +104,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" aria-label="Scroll to top" title="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" aria-label="Previous user message" title="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" aria-label="Next user message" title="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" aria-label="Scroll to bottom" title="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
+                  <span class="material-symbols-outlined" aria-hidden="true">vertical_align_bottom</span>
                 </button>
               </div>
             </div>