From 91e4e65fa67e52a3d6e67b4329b02019a890a676 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 07:37:37 +0200 Subject: [PATCH] a11y: focus-visible ring on .lang-option (language picker) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/styles.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/styles.css b/src/styles.css index 394554a..01cee75 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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;