From 54790f2f820849fdf4b5cf1ca809045a04bfee16 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 27 May 2026 09:01:36 +0000
Subject: [PATCH] feat(ux): Add ARIA labels to chat and task icon buttons

Added `aria-label`s to the chat navigation buttons and task action buttons
to improve screen reader accessibility. Also added `aria-hidden="true"`
to the internal icon font spans to prevent screen readers from reading the
ligature text.

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 .jules/palette.md                              |  0
 webui/components/sidebar/tasks/tasks-list.html | 11 ++++++-----
 webui/index.html                               | 16 ++++++++--------
 3 files changed, 14 insertions(+), 13 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/tasks/tasks-list.html b/webui/components/sidebar/tasks/tasks-list.html
index 2dc6c08337..5101023460 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)"
+                                  aria-label="View task details"
                                   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>