A11Y: zoomed image previews have no keyboard or single-click pan controls #830

Open
opened 2026-10-02 13:22:03 +00:00 by kayg · 1 comment
Owner

Context

Source accessibility review of origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5, job rev-a11y, assigned #427. The shared image preview allows keyboard zoom but offers no keyboard pan.

Evidence

  • packages/ui/src/components/viewer/ImageView.svelte:97–100: changing the image offset while zoomed is available only in the pointer-drag handler.
  • packages/ui/src/components/viewer/ImageView.svelte:114–120: the exported keyboard API supplies zoom only.
  • packages/ui/src/components/viewer/QuickLook.svelte:155–171: previous/next shortcuts switch items; zoom shortcuts call zoomBy(). No handler changes the image offset.
  • packages/ui/src/components/viewer/ImageView.svelte:163–169: overflow is hidden, so enlarged image edges are outside the visible stage until the User pans.

A keyboard User can enlarge an image but cannot inspect the parts outside the stage at that zoom. WCAG 2.1.1 requires a keyboard path to this function. The custom drag also needs a single-pointer alternative under 2.5.7; keyboard support alone does not supply that alternative.

Expected and exact fix

Add a bounded shared pan command to ImageView. Expose it through keyboard actions in Quick Look and named, focusable pan controls that also work by one tap/click. Keep the existing item-navigation keys unambiguous. Use the existing control primitives and target tokens; publish the chosen shortcuts through the shared registry and warm tooltip. Reset and pan must share reduced-motion behavior with pointer actions. Do not add per-frame layout measurement.

Test idea

Open a real image, enlarge it, and inspect each edge using keyboard actions and then individual taps/clicks without dragging. Check that previous/next still switches items through its standard actions, Reset restores fit, focus stays visible, controls have names, and touch targets meet 44 px. Cover 390/820/1440 px, light/dark, macOS platform emulation and reduced motion.

Duplicate search

Searches: "pan", Quick Look and Photos feature issues #35/#33. No specific keyboard/non-drag image-pan defect was found. This issue covers the shared image viewer, which is used by Files, Photos and public-link previews.

# Context Source accessibility review of `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`, job rev-a11y, assigned #427. The shared image preview allows keyboard zoom but offers no keyboard pan. # Evidence - `packages/ui/src/components/viewer/ImageView.svelte:97–100`: changing the image offset while zoomed is available only in the pointer-drag handler. - `packages/ui/src/components/viewer/ImageView.svelte:114–120`: the exported keyboard API supplies zoom only. - `packages/ui/src/components/viewer/QuickLook.svelte:155–171`: previous/next shortcuts switch items; zoom shortcuts call `zoomBy()`. No handler changes the image offset. - `packages/ui/src/components/viewer/ImageView.svelte:163–169`: overflow is hidden, so enlarged image edges are outside the visible stage until the User pans. A keyboard User can enlarge an image but cannot inspect the parts outside the stage at that zoom. WCAG 2.1.1 requires a keyboard path to this function. The custom drag also needs a single-pointer alternative under 2.5.7; keyboard support alone does not supply that alternative. # Expected and exact fix Add a bounded shared pan command to ImageView. Expose it through keyboard actions in Quick Look and named, focusable pan controls that also work by one tap/click. Keep the existing item-navigation keys unambiguous. Use the existing control primitives and target tokens; publish the chosen shortcuts through the shared registry and warm tooltip. Reset and pan must share reduced-motion behavior with pointer actions. Do not add per-frame layout measurement. # Test idea Open a real image, enlarge it, and inspect each edge using keyboard actions and then individual taps/clicks without dragging. Check that previous/next still switches items through its standard actions, Reset restores fit, focus stays visible, controls have names, and touch targets meet 44 px. Cover 390/820/1440 px, light/dark, macOS platform emulation and reduced motion. # Duplicate search Searches: `"pan"`, Quick Look and Photos feature issues #35/#33. No specific keyboard/non-drag image-pan defect was found. This issue covers the shared image viewer, which is used by Files, Photos and public-link previews.
Author
Owner

Exact clipping anchor at the audited base c4a61e8cf090170f35b1bed3350d9de20c83ecd5: packages/ui/src/components/viewer/ImageView.svelte:161 sets overflow: hidden. This replaces the nearby :163–169 range in the first body. The pointer-only offset update remains at :97–100 and the keyboard zoom API at :114–120.

Exact clipping anchor at the audited base `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`: `packages/ui/src/components/viewer/ImageView.svelte:161` sets `overflow: hidden`. This replaces the nearby `:163–169` range in the first body. The pointer-only offset update remains at `:97–100` and the keyboard zoom API at `:114–120`.
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#830
No description provided.