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:
parent
a8ec8658b3
commit
f29cfd6ed4
@ -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); }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user