Einführung

Ein modal über der Seite eingeblendetes Fenster, das eine Benutzerinteraktion verlangt, bevor fortgefahren wird.

Hydration

Tier 1 — standardmäßig auto-interaktiv. Ein Dialog hat keinen sinnvollen statischen Fallback — Öffnen, Fokus-Einfangen und ESC-Behandlung erfordern alle clientseitiges JavaScript — sodass er standardmäßig als Insel hydriert. Übergeben Sie interactive={false}, um eine statische, inerte Dialog-Hülle zu rendern, die keinen Client-JS mitliefert.

Alle Interaktivitätsentscheidungen der Bibliothek laufen über den gemeinsamen shouldHydrate()-Helfer in app/components/ui/island-utils.ts.

Barrierefreiheit

Entspricht dem Dialog (Modal) WAI-ARIA-Entwurfsmuster. Wenn hydriert (interactive ist standardmäßig true), bietet der Dialog das folgende Verhalten:

• Fokus wandert beim Öffnen in den Dialog — zu initialFocusEl(), sonst dem ersten fokussierbaren Element, sonst dem Inhalt selbst.
• Fokus wird beim Öffnen eingefangen — Tab / Shift+Tab zirkulieren nur innerhalb des Dialoginhalts. Verschachtelte Dialoge werden behandelt: nur der oberste Dialog fängt ein und besitzt Escape.
• Escape schließt den Dialog (sofern nicht closeOnEscape={false}).
• Hintergrund ist inert — alles außerhalb des Dialogs (einschließlich eines übergeordneten Dialogs hinter einem verschachtelten) erhält inert und wird aus der Tab-Reihenfolge entfernt, während der Dialog-Unterbaum interaktiv bleibt.
• Der Bildlauf des Bodys ist gesperrt, solange mindestens ein Dialog geöffnet ist, und wird wiederhergestellt, wenn der letzte schließt.
• Fokus kehrt beim Schließen zum Auslöser zurück (oder zu finalFocusEl(), sofern angegeben).
• Zugänglicher Name — abgeleitet aus title (aria-labelledby) oder einem expliziten aria-label. Ein clientseitiges console.warn wird ausgegeben, wenn keines von beiden vorhanden ist.
• role="alertdialog" — übergeben Sie role="alertdialog" für destruktive Bestätigungen und richten Sie initialFocusEl auf die Abbrechen-/Sicherheits-Aktion, sodass diese zuerst den Fokus erhält. Mit closeOnInteractOutside={false} kann der Dialog nur über eine Schaltfläche oder Escape geschlossen werden.

Verwendung

Einfacher Dialog

import { Dialog, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Dialog
      trigger={<Button>Open Dialog</Button>}
      title="Confirm action"
      description="Are you sure you want to continue?"
      body="This action cannot be undone."
      cancel={<Button variant="outline">Cancel</Button>}
      confirm={<Button>Confirm</Button>}
    />
  );
}

CMS-Seitenbauer

Diese Komponente ist als dialog-Block im Seitenbauer (content/pages/*.json) verfügbar. trigger ist eine verschachtelte Blockliste (das CMS übermittelt immer ein Array):

{
  "type": "dialog",
  "title": "Confirm action",
  "description": "Are you sure you want to continue?",
  "confirmText": "Confirm",
  "cancelText": "Cancel",
  "trigger": [{ "type": "button", "text": "Open Dialog" }]
}

Eigenschaften

Dialog

| title | `string \ | JSX.Element` | Der Dialogtitel. | | description | `string \ | JSX.Element` | Die Dialogbeschreibung. | | body | `string \ | JSX.Element` | Der Hauptinhalts-Text. | | footer | `string \ | JSX.Element` | Benutzerdefinierter Fußzeilen-Inhalt. |

| cancel | JSX.Element | Element, das als Schließen-(Abbrechen-)Auslöser gerendert wird. | | confirm | JSX.Element | Element, das als Aktions-Auslöser gerendert wird. | | closable | boolean | Ob die Schließen-Schaltfläche angezeigt wird. Standard: true. | | interactive | boolean | Aktiviert die clientseitige Hydration für interaktives Verhalten. | | class | string | Benutzerdefinierte CSS-Klassen für das Wurzelelement. |

| role | `"dialog" \ | "alertdialog"` | Dialogvariante. Verwenden Sie "alertdialog" für destruktive Bestätigungen. Standard: "dialog". |

| aria-label | string | Zugänglicher Name, wenn kein title angegeben ist. | | closeOnEscape | boolean | Schließt, wenn Escape gedrückt wird. Standard: true. | | closeOnInteractOutside | boolean | Schließt, wenn auf den Hintergrund geklickt wird. Standard: true. |

| initialFocusEl | `() => HTMLElement \ | null` | Element, das beim Öffnen fokussiert wird. Standardmäßig das erste fokussierbare. |

| finalFocusEl | `() => HTMLElement \ | null` | Element, das beim Schließen fokussiert wird. Standardmäßig der Auslöser. |

Zusätzliche Eigenschaften (z. B. open, defaultOpen, onOpenChange, id) werden an das zugrunde liegende Dialog-Primitiv weitergeleitet.