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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user