nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: expose map status to assistive tech

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/maps/LocationMapTopbar.jsx
View File

@ -17,7 +17,11 @@ export default function LocationMapTopbar({ location, status, onBack }) {
<h1>{getStoreName(location)}</h1> <h1>{getStoreName(location)}</h1>
<span>{getLocationName(location)}</span> <span>{getLocationName(location)}</span>
</div> </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} {status}
</span> </span>
</header> </header>

6
frontend/tests/location-map-manager.spec.ts
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 page.getByRole("button", { name: "Cancel" }).click();
await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/); 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(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 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-object", { hasText: "Bread Wall" })).toBeVisible();
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft"); 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.locator(".location-map-object", { hasText: "Bread Wall" }).locator("rect").first().click();
await page.getByRole("button", { name: "Save Draft" }).click(); await page.getByRole("button", { name: "Save Draft" }).click();
await expect(page.locator(".location-map-status")).toHaveText("Draft"); await expect(page.locator(".location-map-status")).toHaveText("Draft");
await expect(mapStatus).toHaveAccessibleName("Map status: Draft");
expect(savedPayload).not.toBeNull(); expect(savedPayload).not.toBeNull();
const savedObjects = savedPayload?.objects as Array<Record<string, unknown>>; 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 page.getByRole("button", { name: "Publish", exact: true }).click();
await expect(page.locator(".location-map-status")).toHaveText("Published"); 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 Draft" })).toBeVisible();
await expect(page.getByRole("button", { name: "Edit Map" })).toHaveCount(0); await expect(page.getByRole("button", { name: "Edit Map" })).toHaveCount(0);
await expect(page.getByText("loose batteries")).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.getByText("Eastvale")).toBeVisible();
await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible(); await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible();
await expect(page.locator(".location-map-status")).toHaveText("Loading"); 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"); const messageCard = page.locator(".location-map-message-card");
await expect(messageCard.locator(".location-map-state-message")).toHaveText("Loading map..."); await expect(messageCard.locator(".location-map-state-message")).toHaveText("Loading map...");
await expect(messageCard.getByRole("group", { name: "Map message details" })).toHaveCount(0); await expect(messageCard.getByRole("group", { name: "Map message details" })).toHaveCount(0);