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

web/shl/components/Dialog.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+// Dialog-Basis-Komponente — SHL-01. WCAG 2.1 AA: Fokus-Falle, ESC schließt, Tastaturbedienung vollständig.
+
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  titleId: string;
+  title: string;
+  children: ReactNode;
+}
+
+export function Dialog({ open, onClose, titleId, title, children }: DialogProps) {
+  const { t } = useI18n();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previouslyFocused = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    previouslyFocused.current = document.activeElement as HTMLElement | null;
+
+    const node = dialogRef.current;
+    const focusables = node?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    focusables?.[0]?.focus();
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab" || !node) return;
+
+      const items = Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused.current?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="shl-dialog-backdrop"
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        className="shl-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className="shl-dialog-header">
+          <h2 id={titleId}>{title}</h2>
+          <button type="button" onClick={onClose} aria-label={t("shl.dialog.close")}>
+            ×
+          </button>
+        </div>
+        <div className="shl-dialog-body">{children}</div>
+      </div>
+    </div>
+  );
+}

web/shl/components/FormElements.tsx

@@ -0,0 +1,98 @@
+// Formularelemente-Basis-Komponenten — SHL-01. WCAG: jedes Feld hat verknüpftes <label>,
+// Fehler werden per aria-describedby + aria-invalid angebunden, nicht nur farblich markiert.
+
+import { useId } from "react";
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react";
+
+interface FieldWrapperProps {
+  label: string;
+  error?: string;
+  hint?: string;
+  children: (ids: { inputId: string; describedBy: string | undefined }) => ReactNode;
+}
+
+function FieldWrapper({ label, error, hint, children }: FieldWrapperProps) {
+  const inputId = useId();
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div className="shl-field">
+      <label htmlFor={inputId}>{label}</label>
+      {children({ inputId, describedBy })}
+      {hint && (
+        <p id={hintId} className="shl-field-hint">
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p id={errorId} className="shl-field-error" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export interface TextFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "aria-describedby"> {
+  label: string;
+  error?: string;
+  hint?: string;
+}
+
+export function TextField({ label, error, hint, ...inputProps }: TextFieldProps) {
+  return (
+    <FieldWrapper label={label} error={error} hint={hint}>
+      {({ inputId, describedBy }) => (
+        <input
+          id={inputId}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+          {...inputProps}
+        />
+      )}
+    </FieldWrapper>
+  );
+}
+
+export interface SelectFieldProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "id" | "aria-describedby"> {
+  label: string;
+  error?: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+export function SelectField({ label, error, hint, children, ...selectProps }: SelectFieldProps) {
+  return (
+    <FieldWrapper label={label} error={error} hint={hint}>
+      {({ inputId, describedBy }) => (
+        <select
+          id={inputId}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+          {...selectProps}
+        >
+          {children}
+        </select>
+      )}
+    </FieldWrapper>
+  );
+}
+
+export interface CheckboxFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "type"> {
+  label: string;
+}
+
+export function CheckboxField({ label, ...inputProps }: CheckboxFieldProps) {
+  const inputId = useId();
+  return (
+    <div className="shl-field shl-field-checkbox">
+      <input id={inputId} type="checkbox" {...inputProps} />
+      <label htmlFor={inputId}>{label}</label>
+    </div>
+  );
+}

web/shl/components/Shell.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+// Layout-Shell mit Navigation — SHL-01 Akzeptanzkriterium 1.
+// Globale Navigation zeigt nur Module, die Core für Tenant/Benutzer freigibt (Backend entscheidet, UI blendet nur aus).
+
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+import { useTheme } from "../theme/ThemeProvider";
+
+export interface ModuleLink {
+  key: string;
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export interface ShellProps {
+  modules: ModuleLink[];
+  tenantLabel: string;
+  children: ReactNode;
+}
+
+export function Shell({ modules, tenantLabel, children }: ShellProps) {
+  const { scheme, toggle } = useTheme();
+  const { t } = useI18n();
+
+  return (
+    <div className="shl-shell">
+      <a className="shl-skip-link" href="#shl-main-content">
+        {t("shl.shell.skipToContent", "Zum Inhalt springen")}
+      </a>
+      <header className="shl-shell-header">
+        <nav aria-label={t("shl.shell.moduleNav", "Modul-Navigation")}>
+          <ul>
+            {modules.map((mod) => (
+              <li key={mod.key}>
+                <a href={mod.href} aria-current={mod.active ? "page" : undefined}>
+                  {mod.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <div className="shl-shell-context">
+          <span className="shl-tenant-context">{tenantLabel}</span>
+          <button
+            type="button"
+            onClick={toggle}
+            aria-label={
+              scheme === "light" ? t("shl.theme.toggleToDark") : t("shl.theme.toggleToLight")
+            }
+          >
+            {scheme === "light" ? "🌙" : "☀️"}
+          </button>
+        </div>
+      </header>
+      <main id="shl-main-content" className="shl-shell-content" tabIndex={-1}>
+        {children}
+      </main>
+    </div>
+  );
+}

web/shl/components/Table.tsx

@@ -0,0 +1,83 @@
+// Table-Basis-Komponente — SHL-01. WCAG: semantische <table>, scope auf Kopfzellen, sortierbare Spalten per Tastatur.
+
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+export interface TableColumn<Row> {
+  key: string;
+  header: string;
+  render: (row: Row) => ReactNode;
+  sortable?: boolean;
+}
+
+export interface TableProps<Row> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  rowKey: (row: Row) => string;
+  sortKey?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (key: string) => void;
+  caption?: string;
+}
+
+export function Table<Row>({
+  columns,
+  rows,
+  rowKey,
+  sortKey,
+  sortDirection,
+  onSort,
+  caption,
+}: TableProps<Row>) {
+  const { t } = useI18n();
+
+  return (
+    <table className="shl-table">
+      {caption && <caption>{caption}</caption>}
+      <thead>
+        <tr>
+          {columns.map((column) => {
+            const isSorted = column.key === sortKey;
+            const ariaSort = column.sortable
+              ? isSorted
+                ? sortDirection === "asc"
+                  ? "ascending"
+                  : "descending"
+                : "none"
+              : undefined;
+            return (
+              <th key={column.key} scope="col" aria-sort={ariaSort}>
+                {column.sortable ? (
+                  <button
+                    type="button"
+                    onClick={() => onSort?.(column.key)}
+                    className="shl-table-sort-button"
+                  >
+                    {column.header}
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.length === 0 ? (
+          <tr>
+            <td colSpan={columns.length}>{t("shl.table.noRows")}</td>
+          </tr>
+        ) : (
+          rows.map((row) => (
+            <tr key={rowKey(row)}>
+              {columns.map((column) => (
+                <td key={column.key}>{column.render(row)}</td>
+              ))}
+            </tr>
+          ))
+        )}
+      </tbody>
+    </table>
+  );
+}

web/shl/components/Toast.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+// Toast-Basis-Komponente — SHL-01. WCAG: aria-live sorgt dafür, dass Screenreader Meldungen ansagen.
+
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+export type ToastVariant = "info" | "success" | "danger" | "warning";
+
+export interface ToastMessage {
+  id: string;
+  text: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextValue {
+  toasts: ToastMessage[];
+  push: (text: string, variant?: ToastVariant) => void;
+  dismiss: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+  const { t } = useI18n();
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  const push = useCallback((text: string, variant: ToastVariant = "info") => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    setToasts((current) => [...current, { id, text, variant }]);
+  }, []);
+
+  const value = useMemo(() => ({ toasts, push, dismiss }), [toasts, push, dismiss]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="shl-toast-region" role="status" aria-live="polite" aria-atomic="false">
+        {toasts.map((toast) => (
+          <div key={toast.id} className={`shl-toast shl-toast-${toast.variant}`}>
+            <span>{toast.text}</span>
+            <button
+              type="button"
+              onClick={() => dismiss(toast.id)}
+              aria-label={t("shl.toast.dismiss")}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast muss innerhalb von <ToastProvider> aufgerufen werden");
+  }
+  return ctx;
+}