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

Generated with the help of an LLM.

Problem/Motivation

The map picker of the Mapillary Leaflet widgets can be reached with the keyboard: Leaflet 1.9 gives each marker tabindex="0" and role="button", and Enter opens its popup. What a screen reader hears is thin, and some states are only visual:

• A marker's name is its title, "Image 123". It does not say whether the image is local or on Mapillary only, when it was taken, or that it is the selected one; the selection is only a black outline (is-selected).
• A cluster's name is its number, "12", without saying what is counted.
• "Select" in the popup redraws all markers (Picker::render()), so the focus falls back to the page and the keyboard user starts over from the top.
• The focus ring of a marker and the selected outline look the same.
• A dot marker is 14 by 14 pixels, below the 24 by 24 pixel target size of WCAG 2.2 (2.5.8).

The split viewer formatter (mapillary_leaflet_split_viewer) and the viewer ignore prefers-reduced-motion: the map pans with an animation when the viewer moves to another image, and MapillaryJS animates the move between images.

The split viewer always puts the map and the viewer side by side. On a phone each half is a few centimetres wide.

Steps to reproduce

1. Open a node form with a mapillary_image_reference field that uses the map picker widget, open the map and zoom in until there are markers.
2. Move through the markers with Tab while a screen reader runs: each marker is read as "Image" and an ID, clusters as a number.
3. Press Enter on a marker and press "Select" in the popup: the focus leaves the map.
4. Turn on "Reduce motion" in the operating system, view a node with the split viewer formatter and click the map: the map and the viewer still animate.
5. View the same node at a width of 360 pixels: the map and the viewer stay side by side.

Proposed resolution

Map picker (mapillary-picker.js, mapillary-picker.css):

• Markers keep the button role Leaflet gives them and get an aria-label from the source and the capture date ("Local image, 3 May 2024", "Mapillary image, not imported, 3 May 2024") and aria-pressed, true on the selected marker. The title stays for the mouse.
• Clusters get an aria-label such as "12 local images, zoom in".
• 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 still on the map.
• A :focus-visible style that differs from the selected outline.
• Dot markers get a 24 pixel hit area; the dot stays 14 pixels.
• With reduced motion, the cluster groups are created with animate: false. The picker's map itself comes from the Leaflet module, so its zoom animation stays as configured there.

Split viewer (mapillary-leaflet-formatter.js, mapillary-split-viewer.css) and viewer (mapillary-viewer.js):

• With reduced motion, the split viewer's map is created without zoom, fade and marker animations and moves with setView() without animation, and createViewer() passes transitionMode: TransitionMode.Instantaneous to MapillaryJS. The check is matchMedia('(prefers-reduced-motion: reduce)'), read when the map or the viewer is created.
• Below a width of 40rem, the map and the viewer stack, the map on top. Each gets the formatter's height (--mapillary-viewer-height), so the wrapper's height doubles. Leaflet and MapillaryJS follow window resizes on their own.

Other:

• Tests: MapillaryPickerTest checks the labels, aria-pressed before and after "Select", and the focus after "Select". A FunctionalJavascript test checks that the split viewer stacks in a narrow window and that, with matchMedia stubbed to report reduced motion, the viewer is created with the instantaneous transition mode.
• A "Changed" entry under [Unreleased] in CHANGELOG.md: on narrow screens the split viewer is stacked and twice as high, which theme CSS for .mapillary-leaflet-split-wrapper may need to know.
• Upgrade path: no setting, schema or markup changes, so there is no update function.

This builds on the split viewer marker of #3633965: Show the active image and its viewing direction on the split viewer's map.

Remaining tasks

• Implementation and tests.
• Merge request.
• Review.

User interface changes

• Map picker markers and clusters have screen reader labels, the selected marker is announced as pressed, and the focus stays on the map after "Select".
• A visible focus ring on markers, separate from the selected outline.
• No map or viewer animation when the browser asks for reduced motion.
• On narrow screens the split viewer shows the map above the viewer.

API changes

None.

Data model changes

None.