From eb0507f942b233667675447ad22175b0219f7cbf Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 13 Sep 2026 05:47:43 +0200 Subject: [PATCH] fix(keys): a card reached by Tab rings the whole card, not just its poster MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner report: on the Plex browse grid, Tab onto the first card ringed only the poster, and the first arrow key then moved the ring round the whole card. The poster is the card's own role=button Tab stop, so Tab gave it the app-wide button ring, while listNav's arrows focus the card root (D2: the ring goes round the whole item). The card's "open" element (`data-nav-open` — the Plex poster, a video card's title link) now stands for the card: when it holds keyboard focus the card root wears the ring and the element's own ring is transparent. Controls inside the card (watched toggle, actions) keep their own ring. Measured in Chrome (jsdom evaluates neither :focus-visible nor :has): Plex browse, Tab from the sort control → poster focused, card outline 2px accent, poster outline transparent; → moves to card 1 with the same ring. Feed, Tab onto a card's title link → the card is ringed, the link is not. --- frontend/src/index.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 334c7289..2e8f1cd2 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -456,10 +456,17 @@ body { outline: 2px solid transparent; outline-offset: 2px; } - [data-nav-index]:focus-visible { + /* The card's own "open" element (a Plex poster is a role=button Tab stop, a video card's title is a + link) stands for the card: reached by Tab it rings the whole card too, not just itself — otherwise + Tab showed a ring round the poster alone and the first arrow moved it round the card. */ + [data-nav-index]:focus-visible, + [data-nav-index]:has([data-nav-open]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } + [data-nav-index] [data-nav-open]:focus-visible { + outline-color: transparent; + } /* ===== R10 S4 · Selection-paint recipes ===== The ~14 hand-rolled "this is the selected / current / active one" idioms all painted the SAME