Compare commits

..

2 Commits

Author SHA1 Message Date
xRangerDE
a8ec8658b3 release: 4.6.81 focus-visible rings on btn-primary/secondary/pill/close + btn-secondary hover
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 05:48:43 +02:00
xRangerDE
66486dba0c a11y: focus-visible rings on primary action buttons + missing hover on .btn-secondary
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>
2026-05-11 05:48:36 +02:00
3 changed files with 43 additions and 3 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "twitch-vod-manager",
"version": "4.6.80",
"version": "4.6.81",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "twitch-vod-manager",
"version": "4.6.80",
"version": "4.6.81",
"license": "MIT",
"dependencies": {
"axios": "^1.6.0",

View File

@ -1,6 +1,6 @@
{
"name": "twitch-vod-manager",
"version": "4.6.80",
"version": "4.6.81",
"description": "Twitch VOD Manager - Download Twitch VODs easily",
"main": "dist/main.js",
"author": "xRangerDE",

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;