Define semantic page archetypes

This commit is contained in:
2026-08-19 14:26:25 +02:00
parent c042244da8
commit 41db78c201
18 changed files with 315 additions and 87 deletions
@@ -25,6 +25,20 @@ test("shared components remain accessible and keyboard operable", async ({ page
await expectNoAccessibilityViolations(page);
const editorActions = page.getByRole("toolbar", { name: "Bearbeitungsaktionen" });
await expect(page.locator("[data-page-archetype='overview']")).toBeVisible();
await expect(editorActions).toHaveAttribute("data-page-refreshable", "true");
await expect(editorActions).toHaveAttribute("data-page-dirty", "true");
await expect(editorActions.getByRole("status")).toHaveText("Unsaved changes");
await expect(editorActions.locator("[data-page-action-separation='destructive']")).toHaveCount(1);
await expect(editorActions.locator("[data-page-action-separation='destructive']")).toHaveCSS("border-left-width", "2px");
const actionSlots = await editorActions.locator("[data-page-action-slot]").evaluateAll((elements) => elements.map((element) => element.getAttribute("data-page-action-slot")));
expect(actionSlots).toEqual([
"reload",
"context",
"destructive",
"discard",
"save"
]);
await expect(editorActions.getByRole("button")).toHaveText([
"Neu laden",
"Vorschau öffnen",
@@ -42,6 +56,11 @@ test("shared components remain accessible and keyboard operable", async ({ page
await expect(editorActions.getByRole("button", { name: "Verwerfen" })).toBeFocused();
await page.keyboard.press("Tab");
await expect(editorActions.getByRole("button", { name: "Änderungen speichern" })).toBeFocused();
await page.keyboard.press("Enter");
await expect(editorActions).toHaveAttribute("data-page-dirty", "false");
await expect(editorActions.getByRole("status")).toHaveText("Saved");
await expect(editorActions.getByRole("button", { name: "Verwerfen" })).toBeDisabled();
await expect(editorActions.getByRole("button", { name: "Änderungen speichern" })).toBeDisabled();
const opener = page.getByTestId("open-dialog");
await opener.focus();
@@ -92,5 +111,8 @@ test("narrow layout preserves task order without horizontal overflow", async ({
expect(overflowing).toEqual([]);
await expect(page.locator("[data-page-action-archetype='editor'] [data-page-action-group='trailing']"))
.toHaveCSS("justify-content", "flex-end");
const saveRightEdge = await page.locator("[data-page-action-archetype='editor'] [data-page-action-slot='save']").evaluate((element) => element.getBoundingClientRect().right);
const actionBarRightEdge = await page.locator("[data-page-action-archetype='editor']").evaluate((element) => element.getBoundingClientRect().right);
expect(Math.abs(actionBarRightEdge - saveRightEdge)).toBeLessThanOrEqual(1);
await expect(page.locator("[data-conformance-id='shared-ui-lab']")).toHaveScreenshot("shared-ui-light-narrow.png", { animations: "disabled", maxDiffPixelRatio: 0.005 });
});