task: #3634056: Improve screen reader, keyboard focus, reduced motion and narrow screen support in the map picker and the split viewer

Orkut Murat Yılmazrequested to merge
issue/mapillary-3634056:3634056-improve-screen-reader into 1.0.x

Closes #3634056

The map picker and the split viewer get the accessibility changes of the issue: labels and state for screen readers, a focus that stays on the map, reduced motion, and a stacked layout on narrow screens.

Map picker

  • Markers get an aria-label (source and capture date, for example "Local image, 6/1/2025") and aria-pressed, true on the selected one. The title stays for the mouse.
  • A cluster says what it counts ("12 local images, zoom in") with a hidden text inside its icon instead of an aria-label: the cluster group draws the icon again, and an attribute set on the element would be lost each time. The count itself is aria-hidden.
  • After "Select", and after any redraw while a marker has the focus, the focus goes back to the marker of the same image when it is on the map.
  • A focused marker or cluster has a white and purple ring that differs from the black outline of the selected marker.
  • A dot marker is a 24 pixel target (WCAG 2.2, 2.5.8); the dot is still 14 pixels, drawn with a CSS gradient.

Split viewer and viewers

  • With prefers-reduced-motion: reduce the split viewer's map is created without zoom, fade and marker animations and moves to the viewer's image without a panning animation.
  • createViewer() passes transitionMode: TransitionMode.Instantaneous to MapillaryJS in the same case. That covers the street-level viewer too, because both formatters go through that function. The caller's options come after and can override it.
  • Below 40rem the map is above the viewer, each with the height of the formatter, so the wrapper is twice as high.

Tests

  • MapillaryPickerTest: five new tests (labels, cluster name, focus after "Select", focus after a redraw, target size).
  • New SplitViewerAccessibilityTest (7 tests). WebDriver cannot switch on the operating system setting, so the test replaces window.matchMedia() and attaches the behaviors again.
  • The fake MapillaryJS of mapillary_viewer_test has TransitionMode and records the transition mode of each viewer.
  • Run locally: MapillaryPickerTest (15), SplitViewerAccessibilityTest (7), SplitViewerDirectionTest, SplitViewerLoadTest, SplitViewerBaseLayerTest, ViewerBehaviorTest. The full run is left to the pipeline.

Upgrade path

No setting, schema or markup changes, so there is no update function. CHANGELOG.md has two "Changed" entries: the dot marker's larger icon and the doubled height of the split viewer on narrow screens, which theme CSS for .mapillary-picker-marker or .mapillary-leaflet-split-wrapper may need to know.

Not in this MR

  • The issue says the picker's cluster groups are created with animate: false under reduced motion. That is not done here.
  • The picker's own map comes from the Leaflet module, so its zoom animation stays as configured there.

Generated with the help of an LLM.

Merge request reports