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

💡 What
Added `aria-label` attributes to the icon-only buttons in the message queue component (Send all, Clear all, Send now, Remove) and added `aria-hidden="true"` to their internal icon spans.

🎯 Why
Icon-only buttons without accessible labels are invisible to screen readers, leaving users reliant on assistive technology unable to understand what these buttons do. The `aria-hidden="true"` prevents screen readers from redundantly reading the raw ligature text (like "keyboard_double_arrow_right").

📸 Before/After
(No visual changes, purely markup and accessibility improvements)

♿ Accessibility
- Improved screen reader support for the message queue interface by providing clear, descriptive labels matching the existing tooltips.
- Prevented ligature text from being misread.

Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
---
 .../chat/message-queue/message-queue.html        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/webui/components/chat/message-queue/message-queue.html b/webui/components/chat/message-queue/message-queue.html
index 6a6b9b0f41..35ece7358d 100644
--- a/webui/components/chat/message-queue/message-queue.html
+++ b/webui/components/chat/message-queue/message-queue.html
@@ -13,11 +13,11 @@
             Queued Messages (<span x-text="$store.messageQueue.count"></span>)
           </span>
           <div class="queue-header-actions">
-            <button class="queue-header-btn" @click="$store.messageQueue.sendAll()" title="Send all">
-              <span class="material-symbols-outlined">keyboard_double_arrow_right</span>
+            <button class="queue-header-btn" @click="$store.messageQueue.sendAll()" title="Send all" aria-label="Send all">
+              <span class="material-symbols-outlined" aria-hidden="true">keyboard_double_arrow_right</span>
             </button>
-            <button class="queue-header-btn delete" @click="$store.messageQueue.clearQueue()" title="Clear all">
-              <span class="material-symbols-outlined">delete_sweep</span>
+            <button class="queue-header-btn delete" @click="$store.messageQueue.clearQueue()" title="Clear all" aria-label="Clear all">
+              <span class="material-symbols-outlined" aria-hidden="true">delete_sweep</span>
             </button>
           </div>
         </div>
@@ -46,11 +46,11 @@
                 </template>
               </div>
               <div class="queue-item-actions">
-                <button class="queue-action-btn send" @click="$store.messageQueue.sendItem(item.id)" title="Send now">
-                  <span class="material-symbols-outlined">send</span>
+                <button class="queue-action-btn send" @click="$store.messageQueue.sendItem(item.id)" title="Send now" aria-label="Send now">
+                  <span class="material-symbols-outlined" aria-hidden="true">send</span>
                 </button>
-                <button class="queue-action-btn delete" @click="$store.messageQueue.removeItem(item.id)" title="Remove">
-                  <span class="material-symbols-outlined">close</span>
+                <button class="queue-action-btn delete" @click="$store.messageQueue.removeItem(item.id)" title="Remove" aria-label="Remove">
+                  <span class="material-symbols-outlined" aria-hidden="true">close</span>
                 </button>
               </div>
             </div>