From 15c70f8770c8857b7e10528eb97767e3da778eeb Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 14 May 2026 10:00:50 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..571f062c62
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-14 - Google Material Icons Accessibility
+**Learning:** Google Material Icons rely on ligature text (e.g., `content_copy` or `close`) inside `<span class="material-symbols-outlined">`. Without `aria-hidden="true"`, screen readers will announce this literal ligature text to users, causing severe confusion. The `title` attribute is insufficient for accessibility as some screen reader configurations ignore it.
+**Action:** When adding `aria-label` to icon-only action buttons, always ensure the inner icon element (e.g., `<span class="material-symbols-outlined">`) is explicitly marked with `aria-hidden="true"`.
diff --git a/webui/components/modals/file-browser/file-browser.html b/webui/components/modals/file-browser/file-browser.html
index 6c531522ed..59bedeec87 100644
--- a/webui/components/modals/file-browser/file-browser.html
+++ b/webui/components/modals/file-browser/file-browser.html
@@ -103,11 +103,11 @@
                             </button>
                           </div>
                         </div>
-                        <button class="btn-icon-action" x-show="!file.is_dir" @click.stop="$store.fileBrowser.downloadFile(file)" title="Download file">
-                          <span class="material-symbols-outlined">download</span>
+                        <button class="btn-icon-action" x-show="!file.is_dir" @click.stop="$store.fileBrowser.downloadFile(file)" title="Download file" aria-label="Download file">
+                          <span class="material-symbols-outlined" aria-hidden="true">download</span>
                         </button>
-                        <button class="btn-icon-action" @click.stop="$confirmClick($event, () => $store.fileBrowser.deleteFile(file))" title="Delete item">
-                          <span class="material-symbols-outlined">delete</span>
+                        <button class="btn-icon-action" @click.stop="$confirmClick($event, () => $store.fileBrowser.deleteFile(file))" title="Delete item" aria-label="Delete item">
+                          <span class="material-symbols-outlined" aria-hidden="true">delete</span>
                         </button>
                       </div>
                     </div>
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>