feat(a11y): touch-visible card controls + modal focus trap/restore (E4 S6)
UX-7 — hover-only card actions were `opacity-0 group-hover:opacity-100`: fine on a mouse, but invisible AND still tappable on a touch device (no hover). New `.reveal` primitive (index.css) gates the hide on `@media (hover: hover)`, so a touch device keeps the control visible; its partner `.reveal-idle` is the idle badge a control replaces (watched/in-progress pill under the watched-toggle), faded on hover and dropped on touch so the two don't collide at the same corner. Migrated the true controls — feed card action toolbar (VideoCard), Plex poster card watched-toggle/info/add across all card variants + their swap badges (plexCards), message pop-out (Messages), edit-interval pencil (Scheduler), and saved-view star/rename/delete (SavedViewsWidget). Pure play-scrim overlays (the whole card is the tap target) stay hover-only by design. FE-9 — Modal.tsx had aria-modal but no focus management. Adds: a Tab/Shift+Tab focus trap (topmost layer only, wraps at the edges and pulls escaped focus back); initial focus into the dialog unless an autoFocus child already placed it; focus restore to the trigger on close (captured in a useState initializer during render, before commit runs autoFocus and moves activeElement inside); and aria-labelledby wiring the dialog to its title. Gate green (tsc, knip, lint 0-err, 247 vitest). Self-E2E (localdev): FE-9 trap both directions + pull-back + Escape-restore-to-trigger + aria-labelledby verified; UX-7 feed toolbar opacity 0 on desktop / 1 under mobile (hover:none) emulation, Plex reveal buttons opacity 1 + reveal-idle badges display:none on touch.
This commit is contained in:
@@ -189,7 +189,7 @@ function ConversationList({
|
||||
onClick={() => openChat(c.partner)}
|
||||
title={t("messages.popOut")}
|
||||
aria-label={t("messages.popOut")}
|
||||
className="shrink-0 mr-1.5 p-1.5 rounded-lg text-muted opacity-0 group-hover:opacity-100 hover:text-accent hover:bg-bg transition"
|
||||
className="shrink-0 mr-1.5 p-1.5 rounded-lg text-muted reveal hover:text-accent hover:bg-bg transition"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user