A11Y: Photos timeline scrubber has only a 28 px effective touch target #820

Open
opened 2026-10-02 13:16:24 +00:00 by kayg · 4 comments
Owner

Context

Source accessibility review of origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5, job rev-a11y, assigned #427. The Photos timeline scrubber has keyboard slider support but misses the project's touch-target minimum.

Evidence

  • apps/web/src/lib/photos/TimelineScrubber.svelte:270–277: the no-hover layout makes .track ignore pointers.
  • apps/web/src/lib/photos/TimelineScrubber.svelte:293–302: the thumb is 28 px wide and 48 px high; it does not use an expanded target.
  • apps/web/src/lib/photos/TimelineScrubber.svelte:316–320: only the active/dragging thumb accepts pointers.
  • apps/web/src/lib/photos/TimelineScrubber.svelte:109–120: touch pointer capture starts on the handle itself.

The 44 px outer strip is not the effective target because its track has pointer-events: none. The effective target is the 28 px thumb. This violates DESIGN §35's 44 px touch-target rule. This finding does not claim a WCAG 2.5.8 AA size failure: its height/width exceed that criterion's basic 24 px size.

Expected and exact fix

Keep the narrow painted grip but give the touch thumb an effective 44 × 48 px target, contained in the edge strip so it does not cover neighboring item actions. Keep pointer capture on the actual hit target and preserve normal timeline scrolling outside it. Use CSS; do not add layout observers.

Test idea

Use touch emulation at 390 and 820 px with a timeline spanning several months. Scroll until the handle appears, then start a drag in the added target area beside the grip. The scrubber must capture and jump, while a swipe outside that target still scrolls. Check target bounds and adjacent item menus. Keep the existing arrow/Page/Home/End slider behavior and reduced-motion behavior at all widths.

Duplicate search

Search: scrubber. #365 concerns the scrubber label covering an item menu; #33 is the original feature. Neither records the 28 px effective touch target. One issue is filed for the Photos scrubber family.

# Context Source accessibility review of `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`, job rev-a11y, assigned #427. The Photos timeline scrubber has keyboard slider support but misses the project's touch-target minimum. # Evidence - `apps/web/src/lib/photos/TimelineScrubber.svelte:270–277`: the no-hover layout makes `.track` ignore pointers. - `apps/web/src/lib/photos/TimelineScrubber.svelte:293–302`: the thumb is 28 px wide and 48 px high; it does not use an expanded target. - `apps/web/src/lib/photos/TimelineScrubber.svelte:316–320`: only the active/dragging thumb accepts pointers. - `apps/web/src/lib/photos/TimelineScrubber.svelte:109–120`: touch pointer capture starts on the handle itself. The 44 px outer strip is not the effective target because its track has `pointer-events: none`. The effective target is the 28 px thumb. This violates DESIGN §35's 44 px touch-target rule. This finding does not claim a WCAG 2.5.8 AA size failure: its height/width exceed that criterion's basic 24 px size. # Expected and exact fix Keep the narrow painted grip but give the touch thumb an effective 44 × 48 px target, contained in the edge strip so it does not cover neighboring item actions. Keep pointer capture on the actual hit target and preserve normal timeline scrolling outside it. Use CSS; do not add layout observers. # Test idea Use touch emulation at 390 and 820 px with a timeline spanning several months. Scroll until the handle appears, then start a drag in the added target area beside the grip. The scrubber must capture and jump, while a swipe outside that target still scrolls. Check target bounds and adjacent item menus. Keep the existing arrow/Page/Home/End slider behavior and reduced-motion behavior at all widths. # Duplicate search Search: `scrubber`. #365 concerns the scrubber label covering an item menu; #33 is the original feature. Neither records the 28 px effective touch target. One issue is filed for the Photos scrubber family.
Author
Owner

Exact touch-target line anchors at the audited base c4a61e8cf090170f35b1bed3350d9de20c83ecd5: apps/web/src/lib/photos/TimelineScrubber.svelte:274 makes the track ignore pointers, :291–292 sets the 28 × 48 px thumb, and :310–313 enables pointers only for the active/dragging thumb. These replace the nearby ranges in the first body. The target-size finding is unchanged.

Exact touch-target line anchors at the audited base `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`: `apps/web/src/lib/photos/TimelineScrubber.svelte:274` makes the track ignore pointers, `:291–292` sets the 28 × 48 px thumb, and `:310–313` enables pointers only for the active/dragging thumb. These replace the nearby ranges in the first body. The target-size finding is unchanged.
Author
Owner

Additional source check: the coarse-pointer scrubber strip is 44 px high, but only its 28 px thumb accepts pointer input. I am checking a drag that starts beside the visible grip and verifying that a drag outside the expanded target still scrolls the page.

Additional source check: the coarse-pointer scrubber strip is 44 px high, but only its 28 px thumb accepts pointer input. I am checking a drag that starts beside the visible grip and verifying that a drag outside the expanded target still scrolls the page.
Author
Owner

Started work on job/undo-a11y-a11y, based on 9281e63b0164fd0297d959f37eb0008bfa0aa4d3. Scope: issues #740, #741, #744, #745, #819 and #820. I am reproducing each reported behavior with a regression test before changing implementation.

Started work on `job/undo-a11y-a11y`, based on `9281e63b0164fd0297d959f37eb0008bfa0aa4d3`. Scope: issues #740, #741, #744, #745, #819 and #820. I am reproducing each reported behavior with a regression test before changing implementation.
Author
Owner

Finding #820: on touch, the timeline track correctly yielded pointer events to the photo grid, but the visible scrubber handle was only 28 × 48 px and owned all dragging. The 44 px outer strip therefore was not the actual target. The handle now occupies the strip at 44 × 48 px while its 6 px grip stays on the right edge. The production Photos flow measures this target at 390/820 px, starts dragging in the added area, and performs a real touch swipe just outside the strip to verify normal scrolling. Server-backed browser execution awaits the shared server binary.

Finding #820: on touch, the timeline track correctly yielded pointer events to the photo grid, but the visible scrubber handle was only 28 × 48 px and owned all dragging. The 44 px outer strip therefore was not the actual target. The handle now occupies the strip at 44 × 48 px while its 6 px grip stays on the right edge. The production Photos flow measures this target at 390/820 px, starts dragging in the added area, and performs a real touch swipe just outside the strip to verify normal scrolling. Server-backed browser execution awaits the shared server binary.
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#820
No description provided.