diff --git a/frontend/e2e/demo-accessibility.spec.ts b/frontend/e2e/demo-accessibility.spec.ts index af2d696..ff7bd52 100644 --- a/frontend/e2e/demo-accessibility.spec.ts +++ b/frontend/e2e/demo-accessibility.spec.ts @@ -85,3 +85,38 @@ test("key demo pages load without console errors", async ({ page }) => { expect(errors, `Unexpected console errors: ${errors.join("\n")}`).toEqual([]); }); + +test("status-recommendation panel is fully keyboard operable, respects reduced motion, and never signals status by colour alone", async ({ + page, + request, +}) => { + await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } }); + await request.post("/api/v1/demo/reset"); + await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } }); + + await page.emulateMedia({ reducedMotion: "reduce" }); + await page.goto("/login"); + await page.getByRole("button", { name: "Verken als Operations Manager" }).click(); + await expect(page).toHaveURL(/\/dashboard$/); + await page.goto("/data-quality/DQ-DEMO-STATUS"); + + const reviewButton = page.getByRole("button", { name: "Aanbeveling bekijken" }); + await reviewButton.focus(); + await expect(reviewButton).toBeFocused(); + await page.keyboard.press("Enter"); + + const confirmButton = page.getByRole("button", { name: /^Status wijzigen naar/ }); + await expect(confirmButton).toBeVisible(); + + // Status is never conveyed by colour alone: the badge always carries its own text. + const badge = page.locator(".status-decision .badge").first(); + await expect(badge).not.toHaveText(""); + + // The confirm action itself is a real, focusable, keyboard-activatable button (the + // previous "Aanbeveling bekijken" button is unmounted once the decision panel + // replaces it, so focus is verified directly rather than via a Tab chain from it). + await confirmButton.focus(); + await expect(confirmButton).toBeFocused(); + await page.keyboard.press("Enter"); + await expect(page.getByText("Toegepast", { exact: false })).toBeVisible(); +}); diff --git a/frontend/src/pages/DataQualityIssueDetail.tsx b/frontend/src/pages/DataQualityIssueDetail.tsx index ca43c8d..4fb0a18 100644 --- a/frontend/src/pages/DataQualityIssueDetail.tsx +++ b/frontend/src/pages/DataQualityIssueDetail.tsx @@ -566,7 +566,7 @@ function VehicleStatusConflictPanel({ issue, onResolved }: { issue: IssueDetail; recommendation.safe_to_apply; return ( -
+