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

web/shl/__tests__/Dialog.test.tsx

@@ -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");
+  });
+});

web/shl/__tests__/tokens.test.ts

@@ -0,0 +1,39 @@
+// Prüfung: Kontrastwerte erfüllen mindestens AA (SHL-01 Prüfung 3 / Akzeptanzkriterium 4).
+import { describe, expect, it } from "vitest";
+import { colorTokens } from "../tokens/tokens";
+
+// WCAG-2.1-AA-Kontrastberechnung (relative Luminanz, sRGB) — keine externe Abhängigkeit nötig.
+function relLuminance(hex: string): number {
+  const rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  const [r, g, b] = rgb.map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrastRatio(a: string, b: string): number {
+  const l1 = relLuminance(a);
+  const l2 = relLuminance(b);
+  const [lighter, darker] = l1 > l2 ? [l1, l2] : [l2, l1];
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe("Design-Tokens: WCAG 2.1 AA Kontrast", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    const c = colorTokens[scheme];
+
+    it(`${scheme}: textPrimary auf background erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.textPrimary, c.background)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: textSecondary auf surface erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.textSecondary, c.surface)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: accentContrast auf accent erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.accentContrast, c.accent)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: dangerContrast auf danger erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.dangerContrast, c.danger)).toBeGreaterThanOrEqual(4.5);
+    });
+  }
+});