Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

a11y: focus-visible rings on primary action buttons + missing hover on .btn-secondary

Browse Source 
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>
This commit is contained in:
xRangerDE 2026-05-11 05:48:36 +02:00
parent a516c78846
commit 66486dba0c
1 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles.css
View File

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