From 85128086b4da364aa387cbe9a2d3ce9f3ee86cb8 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 08:27:38 +0200
Subject: [PATCH] a11y: focus-visible on .streamer-profile-btn + type=button on
 storage open btn

Two small targeted fixes:

- .streamer-profile-btn (the action buttons in the streamer profile header: Record now, Open on Twitch, Refresh) had :hover but no :focus-visible. Keyboard users tabbing through the profile header buttons couldn't tell which one was focused. Added a purple ring for the default variant and the inner-white + outer-purple double-ring for the .primary variant (matches the convention used everywhere else for purple-background buttons).

- The dynamically-built Storage table "Open" button (renderer-settings.ts:397) was created via document.createElement('button') without setting type. Browsers default to type="submit" for <button> elements, which is fine outside a form but defensive coding to mark it explicitly. Set openBtn.type = 'button'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-settings.ts |  1 +
 src/styles.css           | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/renderer-settings.ts b/src/renderer-settings.ts
index 304dacd..df8e868 100644
--- a/src/renderer-settings.ts
+++ b/src/renderer-settings.ts
@@ -395,6 +395,7 @@ function renderStorageStats(stats: StorageStatsResult): void {
             }
             const openCell = document.createElement('td');
             const openBtn = document.createElement('button');
+            openBtn.type = 'button';
             openBtn.textContent = UI_TEXT.static.storageOpen;
             openBtn.className = 'btn-pill';
             openBtn.addEventListener('click', () => {
diff --git a/src/styles.css b/src/styles.css
index cc05154..334c6de 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4180,6 +4180,20 @@ input[type="number"]::-webkit-outer-spin-button {
     box-shadow: 0 4px 14px rgba(145, 70, 255, 0.4);
 }
 
+/* Focus-visible for the profile action buttons (Record now, Open on
+   Twitch, Refresh). Default variant gets a purple ring; the primary
+   variant already has a purple background so it gets the inner-white
+   + outer-purple double ring used elsewhere for purple-bg buttons. */
+.streamer-profile-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
+    border-color: rgba(145, 70, 255, 0.6);
+}
+
+.streamer-profile-btn.primary:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
+}
+
 /* Skeleton loading state */
 .streamer-profile-skeleton .streamer-profile-skel-block {
     background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);