From 1da5589b1a1e7faa0180f9d89757ae6899fcda7a Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 08:23:21 +0200
Subject: [PATCH] a11y: aria-label on queue retry button + streamer live-dot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two icon-only elements that had a title tooltip but no programmatic accessible-name source for screen readers:

- .queue-retry-btn: a small button on failed queue items, its only visible content is the unicode glyph U+21BB (↻). Screen readers would read it as "clockwise open circle arrow" or skip it entirely. Added aria-label using the already-translated UI_TEXT.queue.retryItem string (same value as the title). Also added type="button" so it doesn't default to submit semantics if the queue is ever wrapped in a form.

- .streamer-live-dot: the small red dot that appears next to a streamer name when they're currently live. It's pure CSS styling on an empty span, so screen readers had nothing to read — losing the live state for assistive tech. Added role="img" + aria-label using the existing UI_TEXT.streamers.liveNowTooltip string, so screen readers announce "Live now" alongside the streamer name.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-queue.ts     | 2 +-
 src/renderer-streamers.ts | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 14cac13..0b4fb05 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -573,7 +573,7 @@ function renderQueue(): void {
                         ${renderQueueItemFileActions(item)}
                     </div>
                 </div>
-                ${item.status === 'error' ? `<button class="queue-retry-btn" title="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
+                ${item.status === 'error' ? `<button class="queue-retry-btn" type="button" title="${escapeHtml(UI_TEXT.queue.retryItem)}" aria-label="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
                 <span class="remove" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.streamers.removeAria)}" onclick="removeFromQueue('${item.id}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();removeFromQueue('${item.id}');}">x</span>
             </div>
         `;
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 2eca46c..5c6b83f 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -479,7 +479,10 @@ function renderStreamers(): void {
         if (isLive) {
             const dot = document.createElement('span');
             dot.className = 'streamer-live-dot';
-            dot.title = UI_TEXT.streamers.liveNowTooltip || 'Live now';
+            const liveLabel = UI_TEXT.streamers.liveNowTooltip || 'Live now';
+            dot.title = liveLabel;
+            dot.setAttribute('role', 'img');
+            dot.setAttribute('aria-label', liveLabel);
             item.appendChild(dot);
         }