polish map search controls (#85)

* polish map search controls

* fix map control focus ring

* harden map focus coverage

* stabilise map search close test

Author: dnywh

e2e/map.spec.ts

@@ -135,6 +135,19 @@ async function zoomInUntilMapPinsAreDetailed(page: Page) {
   await expectMapPinDetailScale(page, 1);
 }
 
+async function focusMapControlByKeyboard(page: Page, testId: string) {
+  for (let i = 0; i < 20; i += 1) {
+    await page.keyboard.press("Tab");
+    const activeTestId = await page.evaluate(() =>
+      document.activeElement?.getAttribute("data-testid")
+    );
+
+    if (activeTestId === testId) return;
+  }
+
+  throw new Error(`Could not focus ${testId} by keyboard`);
+}
+
 test("map mounts when IP location is unavailable and restores the last view", async ({
   page,
 }) => {
@@ -155,6 +168,25 @@ test("map mounts when IP location is unavailable and restores the last view", as
     });
     expect(await readStoredMapView(page)).toBeNull();
 
+    await focusMapControlByKeyboard(page, "map-control-search");
+    await expect(page.getByTestId("map-control-search")).toBeFocused();
+    await expect
+      .poll(() =>
+        page
+          .getByTestId("map-control-search")
+          .evaluate((element) => getComputedStyle(element).boxShadow)
+      )
+      .toContain("inset");
+    await focusMapControlByKeyboard(page, "map-control-zoom-in");
+    await expect(page.getByTestId("map-control-zoom-in")).toBeFocused();
+    await expect
+      .poll(() =>
+        page
+          .getByTestId("map-control-zoom-in")
+          .evaluate((element) => getComputedStyle(element).boxShadow)
+      )
+      .toContain("inset");
+
     await page.getByTestId("map-control-zoom-in").click();
 
     await expect
@@ -264,6 +296,12 @@ test("map search palette flies to a picked geocoding result", async ({
   await page.getByTestId("map-control-search").click();
   const searchInput = page.getByTestId("geocoding-search-input");
   await expect(searchInput).toBeFocused();
+  await expect(page.getByTestId("map-search-close")).toHaveCount(0);
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("map-search-dialog")).toBeHidden();
+
+  await page.getByTestId("map-control-search").click();
+  await expect(searchInput).toBeFocused();
   await searchInput.fill("Newtown");
   await expect
     .poll(async () =>

src/features/map/components/MapControls.tsx

@@ -38,6 +38,7 @@ const controlButtonStyles = css`
   appearance: none;
   border: 0;
   background: ${theme.colors.background.top};
+  box-shadow: var(--map-control-shadow, none);
   color: ${theme.colors.text.ui.emptyState};
   cursor: pointer;
   width: 2rem;
@@ -73,7 +74,17 @@ const controlButtonStyles = css`
   }
 
   &:focus-visible {
-    outline: 3px solid ${theme.colors.focus.outline};
+    outline: none;
+    box-shadow:
+      inset 0 0 0 2px ${theme.colors.focus.outline},
+      var(--map-control-shadow, 0 0 0 0 transparent);
+  }
+
+  @media (forced-colors: active) {
+    &:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
   }
 
   &:disabled {
@@ -112,12 +123,12 @@ const ControlAnchor = styled.div<{ $gap?: boolean }>`
 
 const ControlButton = styled.button<{ $active?: boolean }>`
   ${controlButtonStyles}
+  --map-control-shadow:
+    0 0 0 2px ${theme.colors.border.elevated},
+    0 0.25rem 0.75rem rgba(0, 0, 0, 0.13);
   color: ${({ $active }) =>
     $active ? theme.colors.text.primary : theme.colors.text.ui.emptyState};
   border-radius: 0.7rem;
-  box-shadow:
-    0 0 0 2px ${theme.colors.border.elevated},
-    0 0.25rem 0.75rem rgba(0, 0, 0, 0.13);
 `;
 
 const ZoomGroup = styled.div`

src/features/map/components/MapSearch.tsx

@@ -6,7 +6,6 @@ import { useTranslations } from "next-intl";
 import { keyframes, styled } from "next-yak";
 import type { GeocodingFeature } from "@maptiler/client";
 
-import IconButton from "@/components/IconButton";
 import { theme } from "@/styles/theme.yak";
 import GeocodingSearch from "./GeocodingSearch";
 
@@ -116,23 +115,13 @@ const DialogContent = styled(Dialog.Content)`
   }
 `;
 
-const DialogCloseButton = styled(IconButton)`
-  position: absolute;
-  right: -0.625rem;
-  top: -0.625rem;
-  border-radius: 0.7rem;
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.13);
-`;
-
 export default function MapSearch({
   countryCode,
   onOpenChange,
   onPick,
   open,
 }: MapSearchProps) {
-  const actionsT = useTranslations("Actions");
   const mapT = useTranslations("Map");
-  const closeLabel = actionsT("close");
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
@@ -159,14 +148,6 @@ export default function MapSearch({
             proximity="ip"
             variant="palette"
           />
-          <Dialog.Close asChild>
-            <DialogCloseButton
-              icon="close"
-              aria-label={closeLabel}
-              title={closeLabel}
-              type="button"
-            />
-          </Dialog.Close>
         </DialogContent>
       </Dialog.Portal>
     </Dialog.Root>