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

fix(ui): a card's hover chrome answers keyboard focus, not any focus

Browse Source 
Back from a channel page hands the card its focus again after a mouse trip;
revealed on focus-within, its hover row stayed up under no pointer until a
reload (owner). The row, the Play layer, the Continue + Restart pair and the
global .reveal rule now show on hover or on :focus-visible on the card or
inside it, so Tab and the arrow keys still reveal it.
This commit is contained in:
peter
2026-10-09 00:44:46 +02:00
parent ee94d1949a
commit 851b97b09d
5 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/reveal.ts
+7 -3
View File
@@ -1,8 +1,12 @@
// A card's hover chrome: shown when the card is hovered or holds keyboard focus on a mouse,
// A card's hover chrome: shown when the card is hovered or holds KEYBOARD focus on a mouse,
// removed on touch (`.reveal-hover`, index.css), where the card offers the same actions through its
// "…" beside the title. One string, so the video card and the Plex cards reveal the same way.
// Keyboard focus is `:focus-visible` on the card or inside it, not any focus: Back from a channel
// page hands the card its focus back, and with `:focus-within` the row stayed up under no pointer
// until a reload (owner).
export const HOVER_REVEAL =
"reveal-hover opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity";
"reveal-hover opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-has-focus-visible:opacity-100 transition-opacity";
/** What sits under that chrome at rest (a duration, a watched pill) steps aside while it shows. */
export const HOVER_YIELD = "transition-opacity group-hover:opacity-0 group-focus-within:opacity-0";
export const HOVER_YIELD =
"transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0 group-has-focus-visible:opacity-0";