peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(keys): a card reached by Tab rings the whole card, not just its poster

Browse Source 
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.
This commit is contained in:
peter
2026-09-13 05:47:43 +02:00
parent 6d09b94bbb
commit eb0507f942
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+8 -1
View File
@@ -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