From 5a4b054d9d1b2e2f2add213f961b2dc664b6ec3c Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 07:46:32 +0200 Subject: [PATCH] a11y: focus-visible rings on .vod-btn (per-card action buttons) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Each VOD card renders 2-3 action buttons in its footer (.vod-btn — Trim, Queue, etc.). They had :hover states but no :focus-visible, so keyboard users tabbing through the VOD grid would land on each button without any visual focus indicator. Added: - .vod-btn:focus-visible — purple ring (covers the secondary variant which has a translucent grey bg) - .vod-btn.primary:focus-visible — inner-white + outer-purple double-ring so the indicator stays visible against the button's own purple background (same pattern used for .btn-pill.primary and .btn-primary in 4.6.81/82) Continues the per-area focus-visible pass — VOD-grid keyboard nav (already covered: card itself, checkbox; now: action buttons inside the card) is the final big interactive surface to get coverage. 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 85b7d94..267025e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1621,6 +1621,19 @@ select option { background: rgba(255,255,255,0.15); } +/* Focus-visible for the per-card action buttons (Trim, Queue, etc.). The + primary variant already has a purple background — use the inner-white + + outer-purple double ring so the focus indicator stays visible + against the button's own colour. */ +.vod-btn:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65); +} + +.vod-btn.primary:focus-visible { + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55); +} + /* Settings */ .settings-card { background: var(--bg-card);