a11y: focus-visible rings on queue-action + top-bar + add-streamer buttons

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>
This commit is contained in:
xRangerDE 2026-05-11 05:53:03 +02:00
parent a8ec8658b3
commit f29cfd6ed4

View File

@ -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); }