Define semantic page action layouts

webui/conformance/ConformanceApp.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { FileText, GitBranch, Inbox, Search, ShieldCheck } from "lucide-react";
 import { useLocation } from "react-router";
-import ActionToolbar, { ToolbarGroup } from "../src/components/ActionToolbar";
+import ActionToolbar from "../src/components/ActionToolbar";
 import Button from "../src/components/Button";
 import Card from "../src/components/Card";
 import ContentGrid, { FormGrid } from "../src/components/ContentGrid";
@@ -18,6 +18,7 @@ import FormSection from "../src/components/FormSection";
 import MetricCard from "../src/components/MetricCard";
 import MetricGrid from "../src/components/MetricGrid";
 import PageLayout from "../src/components/PageLayout";
+import PageActionBar from "../src/components/PageActionBar";
 import SelectionList, { SelectionListItem, SelectionListItemContent } from "../src/components/SelectionList";
 import StatePanel from "../src/components/StatePanel";
 import WorkspaceFrame from "../src/components/WorkspaceFrame";
@@ -43,14 +44,19 @@ export default function ConformanceApp() {
       >
         <section className="conformance-section" aria-labelledby="actions-heading">
           <h2 id="actions-heading">Aktionen, Filter und Status</h2>
-          <ActionToolbar surface="subtle" justify="between" aria-label="Vorgangsaktionen">
-            <ToolbarGroup>
-              <Button variant="primary">Änderungen speichern</Button>
-              <Button>Vorschau öffnen</Button>
-              <Button variant="ghost">Verwerfen</Button>
-            </ToolbarGroup>
-            <Button variant="danger" disabledReason="Nur die federführende Stelle darf diesen Vorgang endgültig löschen.">Löschen</Button>
-          </ActionToolbar>
+          <PageActionBar
+            variant="editor"
+            label="Bearbeitungsaktionen"
+            reloadAction={<Button variant="ghost">Neu laden</Button>}
+            contextActions={(
+              <>
+                <Button>Vorschau öffnen</Button>
+                <Button variant="danger" disabledReason="Nur die federführende Stelle darf diesen Vorgang endgültig löschen.">Löschen</Button>
+              </>
+            )}
+            discardAction={<Button variant="ghost">Verwerfen</Button>}
+            saveAction={<Button variant="primary">Änderungen speichern</Button>}
+          />
           <FilterBar surface="control" aria-label="Vorgangsliste filtern">
             <label>Suche<input type="search" placeholder="Aktenzeichen oder verantwortliche Stelle" /></label>
             <label>Status<select defaultValue="open"><option value="open">Offen</option><option value="done">Abgeschlossen</option></select></label>

webui/conformance/tests/ui-conformance.spec.ts

@@ -24,6 +24,25 @@ test("shared components remain accessible and keyboard operable", async ({ page
   await expect(page.getByRole("heading", { level: 1, name: "Zentrale GovOPlaN-Oberflächen" })).toBeVisible();
   await expectNoAccessibilityViolations(page);
 
+  const editorActions = page.getByRole("toolbar", { name: "Bearbeitungsaktionen" });
+  await expect(editorActions.getByRole("button")).toHaveText([
+    "Neu laden",
+    "Vorschau öffnen",
+    "Löschen",
+    "Verwerfen",
+    "Änderungen speichern"
+  ]);
+  await editorActions.getByRole("button", { name: "Neu laden" }).focus();
+  await page.keyboard.press("Tab");
+  await expect(editorActions.getByRole("button", { name: "Vorschau öffnen" })).toBeFocused();
+  await page.keyboard.press("Tab");
+  await expect(editorActions.locator(".disabled-action-tooltip")).toBeFocused();
+  await expect(page.getByRole("tooltip")).toContainText("Nur die federführende Stelle");
+  await page.keyboard.press("Tab");
+  await expect(editorActions.getByRole("button", { name: "Verwerfen" })).toBeFocused();
+  await page.keyboard.press("Tab");
+  await expect(editorActions.getByRole("button", { name: "Änderungen speichern" })).toBeFocused();
+
   const opener = page.getByTestId("open-dialog");
   await opener.focus();
   await page.keyboard.press("Enter");
@@ -71,5 +90,7 @@ test("narrow layout preserves task order without horizontal overflow", async ({
     .filter(({ left, right }) => left < -1 || right > window.innerWidth + 1)
     .slice(0, 20));
   expect(overflowing).toEqual([]);
+  await expect(page.locator("[data-page-action-archetype='editor'] [data-page-action-group='trailing']"))
+    .toHaveCSS("justify-content", "flex-end");
   await expect(page.locator("[data-conformance-id='shared-ui-lab']")).toHaveScreenshot("shared-ui-light-narrow.png", { animations: "disabled", maxDiffPixelRatio: 0.005 });
 });