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

a11y: focus-visible ring on .lang-option (language picker)

Browse Source 
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>
This commit is contained in:
xRangerDE 2026-05-11 07:37:37 +02:00
parent 9046344375
commit 91e4e65fa6
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles.css
View File

@ -1720,11 +1720,24 @@ select option {
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 {
border-color: var(--accent);
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 {
width: 16px;
height: 12px;