From f29cfd6ed483ba6e7635212e067bc35332dd2e38 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:53:03 +0200
Subject: [PATCH] a11y: focus-visible rings on queue-action + top-bar +
 add-streamer buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Continuing the keyboard-focus pass from 4.6.81. Five more interactive controls in the always-visible UI surface had no visible focus indicator:

- .btn (the shared base for queue-action buttons — Start/Merge/Wiederholen/Leeren)
- .btn-start (green): inner-white + green-outer ring so it stays visible against the success-green background, and a red-outer variant when .downloading is active (button switches to error red)
- .btn-icon (top-bar Refresh)
- .header-search button (the purple "+" add-streamer button next to the streamer input — uses inner-white + accent-outer like .btn-pill.primary so the ring stays visible against the purple bg)
- .header-search input (was bare, now matches the .btn-icon focus convention — purple border + soft halo)

Tab order on the main shell is now fully keyboard-traversable with visible state at every step.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/styles.css b/src/styles.css
index 9ffc056..9c4ac3f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1150,6 +1150,19 @@ select option {
     transition: all 0.2s;
 }
 
+.btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
+}
+
+.btn-start:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(0, 200, 83, 0.65);
+}
+
+.btn-start.downloading:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(229, 70, 70, 0.65);
+}
+
 .btn-retry {
     background: #2a3344;
     color: #d9e4f7;
@@ -1249,6 +1262,17 @@ select option {
     transform: scale(0.94);
 }
 
+.header-search button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
+}
+
+.header-search input:focus-visible {
+    outline: none;
+    border-color: rgba(145, 70, 255, 0.6);
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.35);
+}
+
 .btn-icon {
     background: var(--bg-card);
     border: 1px solid var(--border-soft);
@@ -1278,6 +1302,12 @@ select option {
     transform: scale(0.96);
 }
 
+.btn-icon:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
+    border-color: rgba(145, 70, 255, 0.55);
+}
+
 @keyframes btn-icon-spin {
     from { transform: rotate(0deg); }
     to   { transform: rotate(180deg); }