Map has descriptive aria-label and role="application"

A map container without role="application" and a descriptive aria-label is opaque to screen readers. WCAG 2.2 SC 4.1.2 (Name, Role, Value) requires that all UI components expose a name and role that assistive technology can announce. Without role="application", screen readers treat the map as generic content and may announce it as an unlabeled region or skip it entirely. Section 508 2018 Refresh 502.3.1 extends this requirement to federal web applications. A label like just "map" gives no context about what the map displays — users cannot determine whether it is relevant to their task before choosing to interact.

Add both role and aria-label to the map container element. The label must describe the map's content, not just its existence — include the listing type and geographic scope.

<div
  id="map"
  role="application"
  aria-label="Interactive map of local restaurants with address, hours, and ratings"
/>

If the map content changes based on filters (e.g., category selection), update aria-label dynamically to reflect the current filter state — for example, "Map of Italian restaurants within 5km". Check src/components/Map.tsx or equivalent for the container element and add attributes there, not on a wrapper div.