From 9d0bdc2a6b7130620437d6e0d8180f59fcae2016 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 09:10:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20chat=20navigation=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 |  4 ++++
 webui/index.html  | 16 ++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..ccda64c215
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2024-05-18 - Chat Navigation Accessibility
+**Learning:** Icon-only navigation buttons in the chat area relied solely on `title` attributes, which can be inconsistent for screen reader users and often lead to raw icon ligature text (e.g., "vertical align top") being announced if the inner icon span isn't explicitly hidden from the accessibility tree.
+**Action:** Consistently apply `aria-label`s to the parent button element and `aria-hidden="true"` to inner icon spans (like `material-symbols-outlined`) across all similar floating action button groups.
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>