SHL-01: ui-shell-design-system-zentral (tokens, theming, i18n-rahmen, basis-komponenten)

2026-08-28 21:41:56 +02:00
parent c895a67c4b
commit 00665592f6
15 changed files with 840 additions and 0 deletions
@@ -0,0 +1,38 @@
+// Prüfung: Tastaturbedienung der Basis-Komponenten funktioniert (SHL-01 Prüfung 2).
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Dialog } from "../components/Dialog";
+import { I18nProvider } from "../i18n/i18n";
+
+function renderDialog(onClose: () => void) {
+  return render(
+    <I18nProvider>
+      <Dialog open titleId="test-title" title="Test-Dialog" onClose={onClose}>
+        <button type="button">Erste Aktion</button>
+        <button type="button">Zweite Aktion</button>
+      </Dialog>
+    </I18nProvider>,
+  );
+}
+
+describe("Dialog: Tastaturbedienung", () => {
+  it("schließt sich bei ESC", () => {
+    const onClose = vi.fn();
+    renderDialog(onClose);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("setzt den Fokus beim Öffnen auf das erste fokussierbare Element", () => {
+    renderDialog(vi.fn());
+    const closeButton = screen.getByRole("button", { name: /schließen/i });
+    expect(document.activeElement).toBe(closeButton);
+  });
+
+  it("ist als modaler Dialog mit Titel-Referenz ausgezeichnet", () => {
+    renderDialog(vi.fn());
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(dialog).toHaveAttribute("aria-labelledby", "test-title");
+  });
+});