Compare commits

..

2 Commits

Author SHA1 Message Date
xRangerDE
03f3756523 release: 4.6.103 .lang-option focus-visible ring
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 07:37:49 +02:00
xRangerDE
91e4e65fa6 a11y: focus-visible ring on .lang-option (language picker)
The two language-picker buttons (Deutsch / English) had :hover and an
.active state but no :focus-visible — keyboard users tabbing into the
group couldn't see which button was focused unless it also happened to
be the active one. And even then, the active state uses a 1px soft
shadow which is easy to mistake for the hover border tweak.

Added two rules:
- .lang-option:focus-visible — purple-accent ring matching the rest of
  the app's focus-visible convention
- .lang-option.active:focus-visible — combines the pressed-state border
  with the thicker 2px focus halo so focus and pressed state are both
  visible when they coincide

Continues the focus-visible pass started in 4.6.81 (btn-primary/secondary/
pill/close) and 4.6.82 (queue + top-bar + add-streamer buttons).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 07:37:37 +02:00
3 changed files with 16 additions and 3 deletions

4
package-lock.json generated
View File

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

View File

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

View File

@ -1720,11 +1720,24 @@ select option {
border-color: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.26);
} }
.lang-option:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
}
.lang-option.active { .lang-option.active {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(145, 70, 255, 0.2); box-shadow: 0 0 0 1px rgba(145, 70, 255, 0.2);
} }
/* Active + focused combine the pressed-state border with the
thicker focus halo so keyboard users still see which one was
focused even when it's also the currently-selected language. */
.lang-option.active:focus-visible {
box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
}
.flag-icon { .flag-icon {
width: 16px; width: 16px;
height: 12px; height: 12px;