harden map accessibility and e2e stability (#84)

* stabilise initial map pin fetch

* improve map accessibility

Author: dnywh

messages/de.json

@@ -500,6 +500,10 @@
   "Map": {
     "drawerTitle": "Eintragsdetails",
     "drawerDescription": "Details zum ausgewählten Eintrag.",
+    "mapRegionLabel": "Kompostkarte",
+    "controlsLabel": "Kartensteuerung",
+    "zoomControlsLabel": "Zoomsteuerung der Karte",
+    "markerLabel": "Kartenmarkierung",
     "emptyTitle": "Nichts gefunden",
     "emptyBody": "Der Eintrag, den du suchst, existiert nicht oder wurde entfernt. Tut uns leid.",
     "searchPlaceholder": "Strasse oder Ort suchen",

messages/en.json

@@ -500,6 +500,10 @@
   "Map": {
     "drawerTitle": "Listing details",
     "drawerDescription": "Selected listing details.",
+    "mapRegionLabel": "Composting map",
+    "controlsLabel": "Map controls",
+    "zoomControlsLabel": "Map zoom controls",
+    "markerLabel": "Map marker",
     "emptyTitle": "Coming up empty",
     "emptyBody": "The listing you’re looking for doesn’t exist or has been removed. Sorry to disappoint.",
     "searchPlaceholder": "Search for a street or place",

messages/es.json

@@ -500,6 +500,10 @@
   "Map": {
     "drawerTitle": "Detalles del anuncio",
     "drawerDescription": "Detalles del anuncio seleccionado.",
+    "mapRegionLabel": "Mapa de compostaje",
+    "controlsLabel": "Controles del mapa",
+    "zoomControlsLabel": "Controles de zoom del mapa",
+    "markerLabel": "Marcador del mapa",
     "emptyTitle": "No encontramos nada",
     "emptyBody": "El anuncio que buscas no existe o fue eliminado.",
     "searchPlaceholder": "Busca una calle o un lugar",

messages/fr.json

@@ -500,6 +500,10 @@
   "Map": {
     "drawerTitle": "Détails de l’annonce",
     "drawerDescription": "Détails de l’annonce sélectionnée.",
+    "mapRegionLabel": "Carte du compostage",
+    "controlsLabel": "Commandes de la carte",
+    "zoomControlsLabel": "Commandes de zoom de la carte",
+    "markerLabel": "Repère de carte",
     "emptyTitle": "Rien à l’horizon",
     "emptyBody": "L’annonce que vous cherchez n’existe pas ou a été supprimée. Désolé pour la déception.",
     "searchPlaceholder": "Rechercher une rue ou un lieu",

messages/pt-BR.json

@@ -500,6 +500,10 @@
   "Map": {
     "drawerTitle": "Detalhes do anúncio",
     "drawerDescription": "Detalhes do anúncio selecionado.",
+    "mapRegionLabel": "Mapa de compostagem",
+    "controlsLabel": "Controles do mapa",
+    "zoomControlsLabel": "Controles de zoom do mapa",
+    "markerLabel": "Marcador do mapa",
     "emptyTitle": "Nada por aqui",
     "emptyBody": "O anúncio que você procura não existe ou foi removido. Desculpe a decepção.",
     "searchPlaceholder": "Busque uma rua ou um lugar",

src/components/LocationSelect/LocationSelect.tsx

@@ -375,6 +375,7 @@ export default function LocationSelect({
               <MapPin type={listingType} selected={true} />
             </Marker>
             <MapZoomControls
+              controlsLabel={t("Map.zoomControlsLabel")}
               onZoomIn={() => mapRef.current?.getMap().zoomIn()}
               onZoomOut={() => mapRef.current?.getMap().zoomOut()}
               zoomInLabel={t("Map.zoomInControl")}

src/features/map/components/MapControls.tsx

@@ -11,6 +11,7 @@ import {
 import { theme } from "@/styles/theme.yak";
 
 type MapControlClusterProps = {
+  controlsLabel: string;
   locateActive?: boolean;
   locateLabel?: string;
   onLocate?: () => void;
@@ -21,9 +22,11 @@ type MapControlClusterProps = {
   zoomInDisabled?: boolean;
   zoomInLabel: string;
   zoomOutLabel: string;
+  zoomControlsLabel: string;
 };
 
 type MapZoomControlsProps = {
+  controlsLabel: string;
   onZoomIn: () => void;
   onZoomOut: () => void;
   zoomInDisabled?: boolean;
@@ -139,6 +142,7 @@ const ZoomButton = styled.button`
 `;
 
 export function MapZoomControls({
+  controlsLabel,
   onZoomIn,
   onZoomOut,
   zoomInDisabled = false,
@@ -148,6 +152,7 @@ export function MapZoomControls({
   return (
     <ControlAnchor>
       <ZoomControlGroup
+        controlsLabel={controlsLabel}
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
         zoomInDisabled={zoomInDisabled}
@@ -159,14 +164,15 @@ export function MapZoomControls({
 }
 
 function ZoomControlGroup({
+  controlsLabel,
   onZoomIn,
   onZoomOut,
   zoomInDisabled = false,
   zoomInLabel,
   zoomOutLabel,
 }: MapZoomControlsProps) {
   return (
-    <ZoomGroup>
+    <ZoomGroup role="group" aria-label={controlsLabel}>
       <ZoomButton
         type="button"
         aria-label={zoomInLabel}
@@ -191,6 +197,7 @@ function ZoomControlGroup({
 }
 
 export default function MapControls({
+  controlsLabel,
   locateActive = false,
   locateLabel,
   onLocate,
@@ -200,10 +207,11 @@ export default function MapControls({
   searchLabel,
   zoomInDisabled = false,
   zoomInLabel,
+  zoomControlsLabel,
   zoomOutLabel,
 }: MapControlClusterProps) {
   return (
-    <ControlAnchor $gap>
+    <ControlAnchor $gap role="group" aria-label={controlsLabel}>
       {onSearch && searchLabel ? (
         <ControlButton
           type="button"
@@ -228,6 +236,7 @@ export default function MapControls({
         </ControlButton>
       ) : null}
       <ZoomControlGroup
+        controlsLabel={zoomControlsLabel}
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
         zoomInDisabled={zoomInDisabled}

src/features/map/components/MapPinLayer.tsx

@@ -15,6 +15,7 @@ import { hasValidCoordinates } from "../lib/mapUtils";
 
 type MapPinLayerProps = {
   listings: ListingMarker[];
+  markerLabel: string;
   selectedListingId: number | null;
   onMarkerClick: (listing: ListingMarker) => void;
 };
@@ -23,6 +24,7 @@ type ListingMapPinMarkerProps = {
   listing: ListingMarker;
   coords: ListingCoordinates;
   isSelected: boolean;
+  markerLabel: string;
   onMarkerClick: MapPinLayerProps["onMarkerClick"];
 };
 
@@ -36,6 +38,7 @@ function ListingMapPinMarker({
   listing,
   coords,
   isSelected,
+  markerLabel,
   onMarkerClick,
 }: ListingMapPinMarkerProps) {
   const markerRef = useRef<MarkerInstance | null>(null);
@@ -51,6 +54,8 @@ function ListingMapPinMarker({
     if (!markerElement) return;
 
     markerElement.tabIndex = 0;
+    markerElement.setAttribute("role", "button");
+    markerElement.setAttribute("aria-label", markerLabel);
 
     const activateFromKeyboard = (event: KeyboardEvent) => {
       lastKeyboardActivationRef.current = event.timeStamp;
@@ -86,10 +91,13 @@ function ListingMapPinMarker({
 
     return () => {
       isSpaceActivationPendingRef.current = false;
+      markerElement.removeAttribute("aria-label");
+      markerElement.removeAttribute("role");
+      markerElement.removeAttribute("tabindex");
       markerElement.removeEventListener("keydown", handleMarkerKeyDown);
       markerElement.removeEventListener("keyup", handleMarkerKeyUp);
     };
-  }, [listing, onMarkerClick]);
+  }, [listing, markerLabel, onMarkerClick]);
 
   const handlePinClick = (event: ReactMouseEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -146,6 +154,7 @@ function ListingMapPinMarker({
 
 export default function MapPinLayer({
   listings,
+  markerLabel,
   selectedListingId,
   onMarkerClick,
 }: MapPinLayerProps) {
@@ -163,6 +172,7 @@ export default function MapPinLayer({
               listing={listing}
               coords={coords}
               isSelected={isSelected}
+              markerLabel={markerLabel}
               onMarkerClick={onMarkerClick}
             />
           );

src/features/map/components/MapView.tsx

@@ -220,6 +220,7 @@ export default function MapView({
   const initialMapPinZoomStyleRef = useRef<MapPinZoomStyle | null>(null);
   const pendingPinZoomRef = useRef<number | null>(null);
   const pinZoomAnimationFrameRef = useRef<number | null>(null);
+  const hasSyncedIdleBoundsRef = useRef(false);
   const saveMapViewTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
   );
@@ -350,10 +351,17 @@ export default function MapView({
 
   const handleLoad = useCallback(() => {
     handleMapLoad();
-    const map = syncCurrentMapState();
-    map?.once("idle", syncCurrentMapState);
+    hasSyncedIdleBoundsRef.current = false;
+    syncCurrentMapState();
   }, [handleMapLoad, syncCurrentMapState]);
 
+  const handleIdle = useCallback(() => {
+    if (hasSyncedIdleBoundsRef.current) return;
+
+    hasSyncedIdleBoundsRef.current = true;
+    syncCurrentMapState();
+  }, [syncCurrentMapState]);
+
   useEffect(() => {
     if (initialCoordinates) {
       lastSavedMapViewRef.current = initialCoordinates;
@@ -485,6 +493,8 @@ export default function MapView({
   return (
     <MapContainer
       ref={mapContainerRef}
+      role="region"
+      aria-label={t("mapRegionLabel")}
       data-testid="map-view"
       style={initialMapPinZoomStyleRef.current ?? undefined}
     >
@@ -501,6 +511,7 @@ export default function MapView({
             onZoom={handleMove}
             onMoveEnd={handleMoveEnd}
             onLoad={handleLoad}
+            onIdle={handleIdle}
             onError={handleMapError}
             onClick={handleMapClickInternal}
           >
@@ -515,6 +526,7 @@ export default function MapView({
 
             <MapPinLayer
               listings={listings}
+              markerLabel={t("markerLabel")}
               selectedListingId={selectedListingId}
               onMarkerClick={onMarkerClick}
             />
@@ -524,12 +536,13 @@ export default function MapView({
                 latitude={userCoordinates.latitude}
                 anchor="center"
               >
-                <UserLocationDot />
+                <UserLocationDot aria-hidden="true" />
               </Marker>
             ) : null}
           </Map>
 
           <MapControls
+            controlsLabel={t("controlsLabel")}
             locateActive={Boolean(userCoordinates)}
             locateLabel={t("locateControl")}
             onLocate={handleLocate}
@@ -539,6 +552,7 @@ export default function MapView({
             searchLabel={t("searchLabel")}
             zoomInDisabled={isZoomInDisabled}
             zoomInLabel={t("zoomInControl")}
+            zoomControlsLabel={t("zoomControlsLabel")}
             zoomOutLabel={t("zoomOutControl")}
           />
           <MapSearch
@@ -549,11 +563,15 @@ export default function MapView({
           />
         </>
       ) : (
-        <LoadingChip>{t("loadingPins")}</LoadingChip>
+        <LoadingChip role="status" aria-live="polite">
+          {t("loadingPins")}
+        </LoadingChip>
       )}
 
       {hasInitialPosition && isFetching && (
-        <LoadingChip>{t("loadingPins")}</LoadingChip>
+        <LoadingChip role="status" aria-live="polite">
+          {t("loadingPins")}
+        </LoadingChip>
       )}
 
       {showReturnButton && (