From ebb48ca5352c8544d722fd94ffefdf713beed79d Mon Sep 17 00:00:00 2001
From: Mohd Kaif Ansari <155880242+techykaif@users.noreply.github.com>
Date: Sat, 22 Aug 2026 00:09:49 +0530
Subject: [PATCH 1/4] fix(a11y): show focused result state

---
 src/components/map/results-list.tsx | 82 ++++++++++++++++-------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/map/results-list.tsx b/src/components/map/results-list.tsx
index 4e4481f..957196e 100644
--- a/src/components/map/results-list.tsx
+++ b/src/components/map/results-list.tsx
@@ -24,6 +24,7 @@ interface ResultsListProps {
     onSuggest: () => void;
   };
   onSelect: (place: Place) => void;
+  focusId?: string | null;
   /** Optional expand/collapse control (e.g. "Show all" for the nearest list). */
   toggle?: { label: string; onClick: () => void } | null;
 }
@@ -34,6 +35,7 @@ export function ResultsList({
   rows,
   emptyState,
   onSelect,
+  focusId,
   toggle,
 }: ResultsListProps) {
   return (
@@ -81,44 +83,52 @@ export function ResultsList({
         </div>
       ) : (
         <ul className="min-h-0 space-y-1 overflow-y-auto">
-          {rows.map(({ place, distanceKm }) => (
-            <li key={place.id}>
-              <div className="group flex items-center gap-2.5 rounded-md px-2 py-2 hover:bg-muted">
-                <span
-                  aria-hidden
-                  className="size-3 shrink-0 rounded-full"
-                  style={{ backgroundColor: PLACE_TYPE_COLORS[place.type] }}
-                />
-                <button
-                  type="button"
-                  onClick={() => onSelect(place)}
-                  className="min-w-0 flex-1 text-left"
-                  title={`${place.name} (${PLACE_TYPE_LABELS[place.type]})`}
+          {rows.map(({ place, distanceKm }) => {
+            const focused = focusId === place.id;
+            return (
+              <li key={place.id}>
+                <div
+                  className={`group flex items-center gap-2.5 rounded-md px-2 py-2 ${
+                    focused ? "bg-muted ring-1 ring-border" : "hover:bg-muted"
+                  }`}
                 >
-                  <span className="flex items-center gap-1.5">
-                    <span className="block truncate text-sm text-foreground">
-                      {place.name}
+                  <span
+                    aria-hidden
+                    className="size-3 shrink-0 rounded-full"
+                    style={{ backgroundColor: PLACE_TYPE_COLORS[place.type] }}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => onSelect(place)}
+                    aria-current={focused ? "true" : undefined}
+                    className="min-w-0 flex-1 text-left"
+                    title={`${place.name} (${PLACE_TYPE_LABELS[place.type]})`}
+                  >
+                    <span className="flex items-center gap-1.5">
+                      <span className="block truncate text-sm text-foreground">
+                        {place.name}
+                      </span>
+                      <VerifiedBadge place={place} />
                     </span>
-                    <VerifiedBadge place={place} />
-                  </span>
-                  <span className="block truncate text-xs text-muted-foreground">
-                    {PLACE_TYPE_LABELS[place.type]}
-                    {distanceKm !== undefined && ` · ${formatDistance(distanceKm)}`}
-                  </span>
-                </button>
-                <a
-                  href={directionsUrl(place.lat, place.lng)}
-                  target="_blank"
-                  rel="noreferrer"
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label={`Directions to ${place.name}`}
-                  className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground"
-                >
-                  <Navigation className="size-4" />
-                </a>
-              </div>
-            </li>
-          ))}
+                    <span className="block truncate text-xs text-muted-foreground">
+                      {PLACE_TYPE_LABELS[place.type]}
+                      {distanceKm !== undefined && ` · ${formatDistance(distanceKm)}`}
+                    </span>
+                  </button>
+                  <a
+                    href={directionsUrl(place.lat, place.lng)}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={`Directions to ${place.name}`}
+                    className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground"
+                  >
+                    <Navigation className="size-4" />
+                  </a>
+                </div>
+              </li>
+            );
+          })}
         </ul>
       )}
     </div>

From b5678e45fbf780df32c226a4b367b4898b9e2b5d Mon Sep 17 00:00:00 2001
From: Mohd Kaif Ansari <155880242+techykaif@users.noreply.github.com>
Date: Sat, 22 Aug 2026 00:10:03 +0530
Subject: [PATCH 2/4] fix(a11y): pass focused place to results

---
 src/components/map/map-panel.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/map/map-panel.tsx b/src/components/map/map-panel.tsx
index 148186f..796cd5f 100644
--- a/src/components/map/map-panel.tsx
+++ b/src/components/map/map-panel.tsx
@@ -52,6 +52,7 @@ interface MapPanelProps {
   onResetFilters: () => void;
   resultsToggle?: { label: string; onClick: () => void } | null;
   onSelectPlace: (place: Place) => void;
+  focusId?: string | null;
 
   onLocated: (loc: LatLng) => void;
   onShare: () => void;
@@ -82,6 +83,7 @@ export function MapPanel({
   onResetFilters,
   resultsToggle,
   onSelectPlace,
+  focusId,
   onLocated,
   onShare,
   myPlaces,
@@ -201,6 +203,7 @@ export function MapPanel({
           onSuggest: () => setSuggestOpen(true),
         }}
         onSelect={onSelectPlace}
+        focusId={focusId}
         toggle={resultsToggle}
       />
 

From 296f49c926bce3ce736f74e6018246a4957d7c06 Mon Sep 17 00:00:00 2001
From: Mohd Kaif Ansari <155880242+techykaif@users.noreply.github.com>
Date: Sat, 22 Aug 2026 00:10:24 +0530
Subject: [PATCH 3/4] fix(a11y): connect focused map place to results

---
 src/components/map/places-map.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/map/places-map.tsx b/src/components/map/places-map.tsx
index f337cfa..95450b4 100644
--- a/src/components/map/places-map.tsx
+++ b/src/components/map/places-map.tsx
@@ -320,6 +320,7 @@ export function PlacesMap({ places }: PlacesMapProps) {
     onResetFilters: () => setFilters({ types: [], city: null, query: "" }),
     resultsToggle,
     onSelectPlace: selectPlace,
+    focusId,
     onLocated,
     onShare: share,
     myPlaces: user

From 71b58342fdca05d539d1db532fee21126cb19dbf Mon Sep 17 00:00:00 2001
From: Mohd Kaif Ansari <155880242+techykaif@users.noreply.github.com>
Date: Sat, 22 Aug 2026 00:10:42 +0530
Subject: [PATCH 4/4] refactor(a11y): keep focused row diff minimal

---
 src/components/map/results-list.tsx | 85 ++++++++++++++---------------
 1 file changed, 41 insertions(+), 44 deletions(-)

diff --git a/src/components/map/results-list.tsx b/src/components/map/results-list.tsx
index 957196e..a35efa8 100644
--- a/src/components/map/results-list.tsx
+++ b/src/components/map/results-list.tsx
@@ -83,52 +83,49 @@ export function ResultsList({
         </div>
       ) : (
         <ul className="min-h-0 space-y-1 overflow-y-auto">
-          {rows.map(({ place, distanceKm }) => {
-            const focused = focusId === place.id;
-            return (
-              <li key={place.id}>
-                <div
-                  className={`group flex items-center gap-2.5 rounded-md px-2 py-2 ${
-                    focused ? "bg-muted ring-1 ring-border" : "hover:bg-muted"
-                  }`}
+          {rows.map(({ place, distanceKm }) => (
+            <li key={place.id}>
+              <div
+                className={`group flex items-center gap-2.5 rounded-md px-2 py-2 ${
+                  focusId === place.id ? "bg-muted ring-1 ring-border" : "hover:bg-muted"
+                }`}
+              >
+                <span
+                  aria-hidden
+                  className="size-3 shrink-0 rounded-full"
+                  style={{ backgroundColor: PLACE_TYPE_COLORS[place.type] }}
+                />
+                <button
+                  type="button"
+                  onClick={() => onSelect(place)}
+                  aria-current={focusId === place.id ? "true" : undefined}
+                  className="min-w-0 flex-1 text-left"
+                  title={`${place.name} (${PLACE_TYPE_LABELS[place.type]})`}
                 >
-                  <span
-                    aria-hidden
-                    className="size-3 shrink-0 rounded-full"
-                    style={{ backgroundColor: PLACE_TYPE_COLORS[place.type] }}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => onSelect(place)}
-                    aria-current={focused ? "true" : undefined}
-                    className="min-w-0 flex-1 text-left"
-                    title={`${place.name} (${PLACE_TYPE_LABELS[place.type]})`}
-                  >
-                    <span className="flex items-center gap-1.5">
-                      <span className="block truncate text-sm text-foreground">
-                        {place.name}
-                      </span>
-                      <VerifiedBadge place={place} />
+                  <span className="flex items-center gap-1.5">
+                    <span className="block truncate text-sm text-foreground">
+                      {place.name}
                     </span>
-                    <span className="block truncate text-xs text-muted-foreground">
-                      {PLACE_TYPE_LABELS[place.type]}
-                      {distanceKm !== undefined && ` · ${formatDistance(distanceKm)}`}
-                    </span>
-                  </button>
-                  <a
-                    href={directionsUrl(place.lat, place.lng)}
-                    target="_blank"
-                    rel="noreferrer"
-                    onClick={(e) => e.stopPropagation()}
-                    aria-label={`Directions to ${place.name}`}
-                    className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground"
-                  >
-                    <Navigation className="size-4" />
-                  </a>
-                </div>
-              </li>
-            );
-          })}
+                    <VerifiedBadge place={place} />
+                  </span>
+                  <span className="block truncate text-xs text-muted-foreground">
+                    {PLACE_TYPE_LABELS[place.type]}
+                    {distanceKm !== undefined && ` · ${formatDistance(distanceKm)}`}
+                  </span>
+                </button>
+                <a
+                  href={directionsUrl(place.lat, place.lng)}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={`Directions to ${place.name}`}
+                  className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground"
+                >
+                  <Navigation className="size-4" />
+                </a>
+              </div>
+            </li>
+          ))}
         </ul>
       )}
     </div>