frontend/src/components/maps/LocationMapBottomSheet.jsx

@@ -166,16 +166,17 @@ export default function LocationMapBottomSheet({
         <div className="location-map-display-panel">
           <div className="location-map-display-controls">
             {DISPLAY_CONTROLS.map(([key, label]) => (
-              <label key={key}>
+              <button
-                <input
+                key={key}
-                  type="checkbox"
+                type="button"
-                  checked={filters[key]}
+                className={filters[key] ? "active" : ""}
-                  onChange={(event) =>
+                aria-pressed={filters[key]}
-                    setFilters((current) => ({ ...current, [key]: event.target.checked }))
+                onClick={() =>
-                  }
+                  setFilters((current) => ({ ...current, [key]: !current[key] }))
-                />
+                }
+              >
                 {label}
-              </label>
+              </button>
             ))}
           </div>
         </div>

frontend/src/styles/pages/LocationMapManager.css

@@ -502,23 +502,27 @@
   gap: 0.4rem;
 }
 
-.location-map-display-controls label {
+.location-map-display-controls button {
   min-height: 40px;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.35rem;
   padding: 0.35rem 0.45rem;
   border: 1px solid var(--color-border-light);
-  border-radius: 8px;
+  border-radius: 999px;
   background: rgba(15, 23, 34, 0.58);
   color: #f8fafc;
   font-size: 0.82rem;
   font-weight: 700;
+  cursor: pointer;
 }
 
-.location-map-display-controls input {
+.location-map-display-controls button.active {
-  width: 16px;
+  border-color: rgba(96, 165, 250, 0.76);
-  height: 16px;
+  background: rgba(59, 130, 246, 0.32);
+  color: #f8fafc;
+  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
 }
 
 .location-map-editor-actions {

frontend/tests/location-map-manager.spec.ts

@@ -377,7 +377,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await expect(page.getByText("frozen salmon")).toHaveCount(0);
 
   await page.getByRole("button", { name: "Layers" }).click();
-  await page.getByLabel("Unmapped").check();
+  await page.getByRole("button", { name: "Unmapped" }).click();
   await expect(page.getByText("loose batteries")).toBeVisible();
 });
 
@@ -1392,7 +1392,10 @@ 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();
-  await page.getByLabel("Labels").uncheck();
+  const labelsToggle = page.getByRole("button", { name: "Labels" });
+  await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
+  await labelsToggle.click();
+  await expect(labelsToggle).toHaveAttribute("aria-pressed", "false");
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible();
   await expect(produceArea.locator(".location-map-label")).toHaveCount(0);
   await expect(produceArea.locator(".location-map-count")).toHaveText("2 items");
@@ -1444,7 +1447,7 @@ test("viewer explains when the zones layer hides the map", async ({ page }) => {
   await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items");
 
   await page.getByRole("button", { name: "Layers" }).click();
-  await page.getByLabel("Zones").uncheck();
+  await page.getByRole("button", { name: "Zones" }).click();
 
   await expect(page.getByRole("button", { name: "Map area Bakery" })).toHaveCount(0);
   await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
@@ -1487,7 +1490,10 @@ 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();
-  await page.getByLabel("Unmapped").check();
+  const unmappedToggle = page.getByRole("button", { name: "Unmapped" });
+  await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false");
+  await unmappedToggle.click();
+  await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true");
 
   await expect(page.getByText("unmapped item 1")).toBeVisible();
   await expect(page.getByText("unmapped item 8")).toBeVisible();
@@ -1524,7 +1530,7 @@ test("viewer explains when unmapped items are hidden by filters", async ({ page
 
   await page.goto("/stores/100/locations/10/map");
   await page.getByRole("button", { name: "Layers" }).click();
-  await page.getByLabel("Unmapped").check();
+  await page.getByRole("button", { name: "Unmapped" }).click();
 
   await expect(page.getByText("other batteries")).toHaveCount(0);
   await expect(page.getByText("Unmapped items are hidden by layer filters.")).toBeVisible();
@@ -1575,7 +1581,7 @@ test("viewer marks partial unmapped counts when filters hide some items", async
 
   await page.goto("/stores/100/locations/10/map");
   await page.getByRole("button", { name: "Layers" }).click();
-  await page.getByLabel("Unmapped").check();
+  await page.getByRole("button", { name: "Unmapped" }).click();
 
   await expect(page.getByText("visible batteries")).toBeVisible();
   await expect(page.getByText("hidden batteries")).toHaveCount(0);