Form Dialog

Accessibility

Import FormDialog, FormDialogSize, FormDialogSubmitResult from @prepared911/ui/blocks/form-dialog.

The surface is Dialog's: a modal native dialog, named by the title heading and described by the description. The page behind it is inert.
Focus starts on the first field (or an autofocus element), stays inside while open, and returns to the trigger on close. Tab cycles through the fields, Cancel and Save.
Enter in a single-line field submits. A textarea keeps Enter for a new line.
A failed attempt announces the error summary (role="alert") and moves focus once to the first control marked aria-invalid="true", or to the summary when none is. Set invalid and give each field its own error copy.
While a submit is pending, Save is aria-busy with a spinner and its pending name, Cancel is disabled, the form is aria-busy, and Escape does not close the dialog. Nothing covers or disables the page.
Closing a form with unsaved edits opens an alert dialog (ConfirmDialog) named "Discard unsaved changes?" and described by what is lost. Focus starts on "Keep editing", which returns focus to the control that was focused before the prompt. Escape on the prompt closes only the prompt.
A backdrop press does nothing. The body scrolls inside the dialog; give it scrollRegionLabel so a keyboard user can reach it when it overflows and holds no focusable field.
The spinner is static under prefers-reduced-motion. The surfaces' own motion is Dialog's.

Accessibility

Import FormDialog, FormDialogSize, FormDialogSubmitResult from @prepared911/ui/blocks/form-dialog.

The surface is Dialog's: a modal native dialog, named by the title heading and described by the description. The page behind it is inert.
Focus starts on the first field (or an autofocus element), stays inside while open, and returns to the trigger on close. Tab cycles through the fields, Cancel and Save.
Enter in a single-line field submits. A textarea keeps Enter for a new line.
A failed attempt announces the error summary (role="alert") and moves focus once to the first control marked aria-invalid="true", or to the summary when none is. Set invalid and give each field its own error copy.
While a submit is pending, Save is aria-busy with a spinner and its pending name, Cancel is disabled, the form is aria-busy, and Escape does not close the dialog. Nothing covers or disables the page.
Closing a form with unsaved edits opens an alert dialog (ConfirmDialog) named "Discard unsaved changes?" and described by what is lost. Focus starts on "Keep editing", which returns focus to the control that was focused before the prompt. Escape on the prompt closes only the prompt.
A backdrop press does nothing. The body scrolls inside the dialog; give it scrollRegionLabel so a keyboard user can reach it when it overflows and holds no focusable field.
The spinner is static under prefers-reduced-motion. The surfaces' own motion is Dialog's.