From 32a4724858529729d4eec30706d254a691cb4698 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Mon, 15 Jun 2026 23:00:15 -0700
Subject: [PATCH] fix: expose map status to assistive tech

---
 frontend/src/components/maps/LocationMapTopbar.jsx | 6 +++++-
 frontend/tests/location-map-manager.spec.ts        | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/maps/LocationMapTopbar.jsx b/frontend/src/components/maps/LocationMapTopbar.jsx
index 8f13530..09dc012 100644
--- a/frontend/src/components/maps/LocationMapTopbar.jsx
+++ b/frontend/src/components/maps/LocationMapTopbar.jsx
@@ -17,7 +17,11 @@ export default function LocationMapTopbar({ location, status, onBack }) {
         <h1>{getStoreName(location)}</h1>
         <span>{getLocationName(location)}</span>
       </div>
-      <span className={`location-map-status location-map-status-${statusClass}`}>
+      <span
+        className={`location-map-status location-map-status-${statusClass}`}
+        role="status"
+        aria-label={`Map status: ${status}`}
+      >
         {status}
       </span>
     </header>
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 920cdc5..7217cfe 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -370,7 +370,10 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await page.getByRole("button", { name: "Cancel" }).click();
   await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/);
 
+  const mapStatus = page.locator(".location-map-status");
+
   await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
+  await expect(mapStatus).toHaveAccessibleName("Map status: Unsaved Draft");
   await page.getByRole("button", { name: "View", exact: true }).click();
   await expect(page.locator(".location-map-object", { hasText: "Bread Wall" })).toBeVisible();
   await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
@@ -379,6 +382,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await page.locator(".location-map-object", { hasText: "Bread Wall" }).locator("rect").first().click();
   await page.getByRole("button", { name: "Save Draft" }).click();
   await expect(page.locator(".location-map-status")).toHaveText("Draft");
+  await expect(mapStatus).toHaveAccessibleName("Map status: Draft");
 
   expect(savedPayload).not.toBeNull();
   const savedObjects = savedPayload?.objects as Array<Record<string, unknown>>;
@@ -406,6 +410,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
 
   await page.getByRole("button", { name: "Publish", exact: true }).click();
   await expect(page.locator(".location-map-status")).toHaveText("Published");
+  await expect(mapStatus).toHaveAccessibleName("Map status: Published");
   await expect(page.getByRole("button", { name: "Edit Draft" })).toBeVisible();
   await expect(page.getByRole("button", { name: "Edit Map" })).toHaveCount(0);
   await expect(page.getByText("loose batteries")).toHaveCount(0);
@@ -594,6 +599,7 @@ test("loading map keeps location context visible", async ({ page }) => {
   await expect(page.getByText("Eastvale")).toBeVisible();
   await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible();
   await expect(page.locator(".location-map-status")).toHaveText("Loading");
+  await expect(page.getByRole("status")).toHaveAccessibleName("Map status: Loading");
   const messageCard = page.locator(".location-map-message-card");
   await expect(messageCard.locator(".location-map-state-message")).toHaveText("Loading map...");
   await expect(messageCard.getByRole("group", { name: "Map message details" })).toHaveCount(0);