From da860f26a334dcd74dd943a2738724f6945e78a4 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 11 May 2026 09:32:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20and=20hide=20ligature=20text=20for=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 +++
 webui/components/welcome/welcome-screen.html | 15 +++++++++------
 webui/index.html                             | 16 ++++++++--------
 3 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..557904ea23
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-11 - Add ARIA labels and hide ligature text for icon-only buttons
+**Learning:** Icon-only buttons using ligature fonts (like Material Symbols) need both `aria-label` on the button and `aria-hidden="true"` on the inner ligature icon, otherwise screen readers read the raw ligature text instead of the button's intended purpose.
+**Action:** Always add `aria-hidden="true"` to `<span class="material-symbols-outlined">` and ensure the parent button has an `aria-label` when the button is icon-only.
diff --git a/webui/components/welcome/welcome-screen.html b/webui/components/welcome/welcome-screen.html
index 947dd6d84e..c9ffa115f9 100644
--- a/webui/components/welcome/welcome-screen.html
+++ b/webui/components/welcome/welcome-screen.html
@@ -59,8 +59,9 @@ <h3 class="welcome-action-title">Visit Website</h3>
                                 class="welcome-refresh-button"
                                 @click="$store.welcomeStore.refreshBanners(true)"
                                 :disabled="$store.welcomeStore.bannersLoading"
-                                title="Refresh banners">
-                            <span class="material-symbols-outlined" :class="{ 'welcome-spin': $store.welcomeStore.bannersLoading }">refresh</span>
+                                title="Refresh banners"
+                                aria-label="Refresh banners">
+                            <span class="material-symbols-outlined" aria-hidden="true" :class="{ 'welcome-spin': $store.welcomeStore.bannersLoading }">refresh</span>
                         </button>
 
                         <button type="button"
@@ -68,8 +69,9 @@ <h3 class="welcome-action-title">Visit Website</h3>
                                 @click="$store.welcomeStore.undismissBanners()"
                                 x-show="$store.welcomeStore.hasDismissedBanners"
                                 :disabled="$store.welcomeStore.bannersLoading"
-                                title="Undismiss all banners">
-                            <span class="material-symbols-outlined">undo</span>
+                                title="Undismiss all banners"
+                                aria-label="Undismiss all banners">
+                            <span class="material-symbols-outlined" aria-hidden="true">undo</span>
                         </button>
                     </div>
 
@@ -93,8 +95,9 @@ <h3 class="welcome-action-title">Visit Website</h3>
                                 <button class="welcome-banner-dismiss" 
                                         x-show="banner.dismissible !== false"
                                         @click.stop="$store.welcomeStore.dismissBanner(banner.id)"
-                                        title="Dismiss">
-                                    <span class="material-symbols-outlined">close</span>
+                                        title="Dismiss"
+                                        aria-label="Dismiss">
+                                    <span class="material-symbols-outlined" aria-hidden="true">close</span>
                                 </button>
                             </div>
                         </template>
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>