A11Y: Live Photo playback badge has only a 28 px touch target #846

Open
opened 2026-10-02 13:28:03 +00:00 by kayg · 0 comments
Owner

Context

Source accessibility review of origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5, job rev-a11y, assigned #427. The Live Photo playback badge is a real, named toggle, but its touch target is only 28 px high.

Evidence

  • packages/ui/src/components/viewer/LiveMotion.svelte:74–85 renders the playback badge as a native button with a name and aria-pressed.
  • Its .live-badge rule uses height: 28px and no larger minimum or hit-area pseudo-element. The component has no coarse-pointer target rule.
  • packages/ui/src/components/viewer/QuickLook.svelte:233 renders the badge in the image stage, outside the header PillGroup that supplies larger action targets.

The project requires an effective 44 × 44 px touch target (DESIGN §35). Long-press on the image is an additional gesture; it does not enlarge the visible toggle action's target.

Expected and exact fix

Keep the 28 px painted badge and expand its coarse-pointer target with the existing shared target primitive, or increase its control box to at least 44 px. Keep the expanded area separate from the image stage's other actions. Preserve Space/Enter playback, pressed state and explicit playback under reduced motion.

Test idea

Open a real Live Photo with touch emulation at 390 and 820 px. Tap in the added hit area around the badge and check playback and state. Check the effective 44 px target, adjacent actions, keyboard activation and reduced motion. Capture production light/dark macOS-rendered evidence for the implementation at each required width.

Duplicate search

Search: "Live Photo", including #29. No playback-badge target defect was found. One issue is filed for the Live Photo playback family.

# Context Source accessibility review of `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`, job rev-a11y, assigned #427. The Live Photo playback badge is a real, named toggle, but its touch target is only 28 px high. # Evidence - `packages/ui/src/components/viewer/LiveMotion.svelte:74–85` renders the playback badge as a native button with a name and `aria-pressed`. - Its `.live-badge` rule uses `height: 28px` and no larger minimum or hit-area pseudo-element. The component has no coarse-pointer target rule. - `packages/ui/src/components/viewer/QuickLook.svelte:233` renders the badge in the image stage, outside the header PillGroup that supplies larger action targets. The project requires an effective 44 × 44 px touch target (DESIGN §35). Long-press on the image is an additional gesture; it does not enlarge the visible toggle action's target. # Expected and exact fix Keep the 28 px painted badge and expand its coarse-pointer target with the existing shared target primitive, or increase its control box to at least 44 px. Keep the expanded area separate from the image stage's other actions. Preserve Space/Enter playback, pressed state and explicit playback under reduced motion. # Test idea Open a real Live Photo with touch emulation at 390 and 820 px. Tap in the added hit area around the badge and check playback and state. Check the effective 44 px target, adjacent actions, keyboard activation and reduced motion. Capture production light/dark macOS-rendered evidence for the implementation at each required width. # Duplicate search Search: `"Live Photo"`, including #29. No playback-badge target defect was found. One issue is filed for the Live Photo playback family.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#846
No description provided.