From 3433a508b6e82d8ea9a9dc5e1ddb42124869ec1a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 15 May 2026 09:48:17 +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

Added `aria-label`s to the chat navigation buttons and `aria-hidden="true"` to the material icons in `webui/index.html`. This improves screen reader accessibility by providing clear labels for icon-only buttons and preventing the screen reader from reading raw ligature text.

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 .jules/palette.md |  0
 webui/index.html  | 16 ++++++++--------
 2 files changed, 8 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..e69de29bb2
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>