From 66486dba0c52cbbbb449606e8b0ea24a74598204 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:48:36 +0200
Subject: [PATCH] a11y: focus-visible rings on primary action buttons + missing
 hover on .btn-secondary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keyboard-only users had no visible focus indicator on five widely-used button classes:
- .btn-primary (main action button — used in clip download, modal confirms)
- .btn-secondary (cancel buttons, neutral actions; also missing hover transitions)
- .btn-pill (toolbar/bulk-bar action buttons; primary + success + danger variants)
- .btn-close (X-close button used in filter clears, inline removals)
- .queue-detail-btn (queue item detail chip buttons + archive companion buttons)

Tabbing through these buttons left no indication of which one would activate on Enter/Space — WCAG 2.4.7 (Focus Visible) violation.

Added :focus-visible rings using the established box-shadow convention (purple-accent for default, white-inner + accent-outer for purple/green pill variants so the ring stays visible against the button's own purple background, red-toned for .btn-close / .btn-pill.danger). Also added :hover + transition to .btn-secondary which previously had neither — clicking felt unresponsive.

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

diff --git a/src/styles.css b/src/styles.css
index 9d87188..9ffc056 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1725,6 +1725,11 @@ select option {
     background: var(--accent-hover);
 }
 
+.btn-primary: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);
+}
+
 .btn-primary:disabled {
     background: var(--text-secondary);
     cursor: not-allowed;
@@ -1737,6 +1742,17 @@ select option {
     border-radius: 4px;
     padding: 10px 20px;
     cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.22);
+}
+
+.btn-secondary:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
 }
 
 /* ============================================
@@ -1773,6 +1789,20 @@ select option {
     transform: translateY(1px);
 }
 
+.btn-pill:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
+}
+
+.btn-pill.primary:focus-visible,
+.btn-pill.success:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
+}
+
+.btn-pill.danger:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.6);
+}
+
 .btn-pill:disabled {
     opacity: 0.45;
     cursor: not-allowed;
@@ -1842,6 +1872,11 @@ select option {
     color: #ff6b6b;
 }
 
+.btn-close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.6);
+}
+
 /* .queue-detail-btn — tiny chip-style action button used in queue item
    detail rows AND in the archive search results list. Was previously
    rendering with browser defaults (gray flat button). */
@@ -1873,6 +1908,11 @@ select option {
     transform: translateY(0);
 }
 
+.queue-detail-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.7);
+}
+
 /* Clips */
 .clip-input {
     max-width: 600px;