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

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:
2026-10-09 00:44:46 +02:00
parent ee94d1949a
commit 851b97b09d
5 changed files with 41 additions and 8 deletions
+5 -3
View File
@@ -787,7 +787,8 @@ body {
`opacity-0 group-hover:opacity-100`: fine on a mouse (the enclosing `.group` reveals it on hover),
but on a touch device — which never hovers — it is invisible AND still tappable. So the reveal is
gated on `@media (hover: hover)`: only a hover-capable pointer hides it until the group is hovered
or focused (keyboard too, via `:focus-within`); a touch device keeps the default opacity:1 and the
or keyboard-focused (`:focus-visible` on it or inside it — not any focus: a card handed its focus
back after a mouse trip kept its row up); a touch device keeps the default opacity:1 and the
control is always shown. Requires a `.group` ancestor (Tailwind's group marker). */
@media (hover: hover) {
.reveal {
@@ -795,7 +796,8 @@ body {
transition: opacity 150ms ease;
}
.group:hover .reveal,
.group:focus-within .reveal,
.group:focus-visible .reveal,
.group:has(:focus-visible) .reveal,
.reveal:focus-visible {
opacity: 1;
}
@@ -810,7 +812,7 @@ body {
@media (hover: none) {
/* Sibling of `.reveal` for a MOUSE-ONLY hover-reveal: unlike `.reveal` (shown at rest on touch),
a `.reveal-hover` control is removed entirely on a device that can't hover, so it is never an
invisible tap/Tab target. Pair it with the site's own `opacity-0 group-hover:… group-focus-within:…`
invisible tap/Tab target. Pair it with the site's own `opacity-0 group-hover:… group-focus-visible:…`
(which still governs the hover + keyboard case). For a full-card/edge affordance whose action is
already reachable on touch another way — a card's hover row (its "…" beside the title opens the
same actions: `ui/reveal.ts`), VideoCard's play overlay (tapping the card plays/resumes)