From 82eab8114970f76e238f51c322e633419b8181ab Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Mon, 15 Jun 2026 23:19:40 -0700
Subject: [PATCH] fix: expose map layer filter group

---
 .../maps/LocationMapBottomSheetSections.jsx   |  2 +-
 frontend/tests/location-map-manager.spec.ts   | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
index bf53ac8..e0350ad 100644
--- a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
@@ -75,7 +75,7 @@ function MapItemActionList({ items, onSelectItem, itemGroupLabel }) {
 export function LocationMapLayerPanel({ filters, setFilters }) {
   return (
     <div className="location-map-display-panel">
-      <div className="location-map-display-controls">
+      <div className="location-map-display-controls" role="group" aria-label="Layer filters">
         {MAP_DISPLAY_CONTROLS.map(([key, label]) => (
           <button
             key={key}
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 9e50505..ba4b13d 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1392,27 +1392,27 @@ test("mode switches close open map layers without resetting filters", async ({ p
   await page.getByRole("button", { name: "Layers" }).click();
   await page.getByRole("button", { name: "Pins" }).click();
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "true");
-  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
 
   await page.getByRole("button", { name: "Edit Draft" }).click();
 
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
-  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+  await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
 
   await page.getByRole("button", { name: "Layers, 1 changed" }).click();
-  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
   await page.getByRole("button", { name: "View", exact: true }).click();
 
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
-  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+  await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
 
   await page.getByRole("button", { name: "Edit Draft" }).click();
   await page.getByRole("button", { name: "Layers, 1 changed" }).click();
-  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
   await page.getByRole("button", { name: "View", exact: true }).click();
 
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
-  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+  await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
 });
 
 test("mobile keeps viewing draft status compact in the topbar", async ({ page }) => {
@@ -3142,8 +3142,9 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 
   await page.getByRole("button", { name: "Layers" }).click();
-  const labelsToggle = page.getByRole("button", { name: "Labels" });
-  await expect(page.locator(".location-map-display-controls .location-map-layer-state")).toHaveCount(8);
+  const layerFilters = page.getByRole("group", { name: "Layer filters" });
+  const labelsToggle = layerFilters.getByRole("button", { name: "Labels" });
+  await expect(layerFilters.locator(".location-map-layer-state")).toHaveCount(8);
   await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
   await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(1);
   await expect(page.getByRole("button", { name: "Bought" })).toBeVisible();
@@ -3338,7 +3339,7 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag
 
   await page.goto("/stores/100/locations/10/map");
   await page.getByRole("button", { name: "Layers" }).click();
-  const unmappedToggle = page.locator(".location-map-display-panel").getByRole("button", { name: "Unmapped" });
+  const unmappedToggle = page.getByRole("group", { name: "Layer filters" }).getByRole("button", { name: "Unmapped" });
   await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false");
   await unmappedToggle.click();
   await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true");
@@ -3488,7 +3489,7 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
   await page.goto("/stores/100/locations/10/map");
   await page.getByRole("button", { name: "Layers" }).click();
   await page.getByRole("button", { name: "Unmapped" }).click();
-  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
   await expect(page.getByLabel("Unmapped items")).toBeVisible();
   await expect(page.getByText("Unmapped Items")).toHaveCount(0);
   await expect(page.getByText("loose batteries")).toBeVisible();
@@ -3496,7 +3497,7 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
   await page.locator('[data-object-key="1531"]').locator("rect").first().click();
   await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
-  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+  await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
   await expect(page.getByText("french bread")).toBeVisible();
   await expect(page.getByLabel("Unmapped items")).toHaveCount(0);
   await expect(page.getByText("loose batteries")).toHaveCount(0);
@@ -4676,6 +4677,7 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
     expect(actionButtonBox.height).toBeGreaterThanOrEqual(40);
   }
   await page.getByRole("button", { name: "Layers" }).click();
+  await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
   await page.getByRole("button", { name: "Pins" }).click();
   const resetLayersButtonBox = await page.getByRole("button", { name: "Reset layer filters" }).boundingBox();
   expect(resetLayersButtonBox).not.toBeNull();