fix: expose map status to assistive tech

This commit is contained in:
Nico 2026-06-15 23:00:15 -07:00
parent 57ed1dc70f
commit 32a4724858
2 changed files with 11 additions and 1 deletions

View File

@ -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>

View File

@ -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);