Form Layout Drawer

Accessibility

Import FormLayoutDrawer, FormLayoutDrawerEdge, FormLayoutDrawerSize, FormLayoutDrawerSubmitResult from @prepared911/ui/blocks/form-layout-drawer.

The surface is Drawer's: a native dialog named by the title heading. It is always modal: announced as modal, with a scrim, a focus trap, and an inert page behind it. The form is named by the title and described by description.
Focus starts on the first field, not on the header close button, stays inside while open, with Tab in order (header close, fields, Cancel, Submit), and returns to the trigger on close.
Enter in a single-line field submits, through the Submit Button's form attribute. 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, Submit is aria-busy with a spinner and its pending name, Cancel is disabled, the form is aria-busy, and every close request (Escape, the header close button) does nothing.
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.
The body scrolls inside the drawer while the header and footer stay in view; 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 drawer fades in without sliding. The surface's own motion is Drawer's.

Form Layout Drawer / API and Development

Form Layout Sectioned / Usage

Form Layout Drawer

Accessibility

Import FormLayoutDrawer, FormLayoutDrawerEdge, FormLayoutDrawerSize, FormLayoutDrawerSubmitResult from @prepared911/ui/blocks/form-layout-drawer.

The surface is Drawer's: a native dialog named by the title heading. It is always modal: announced as modal, with a scrim, a focus trap, and an inert page behind it. The form is named by the title and described by description.
Focus starts on the first field, not on the header close button, stays inside while open, with Tab in order (header close, fields, Cancel, Submit), and returns to the trigger on close.
Enter in a single-line field submits, through the Submit Button's form attribute. 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, Submit is aria-busy with a spinner and its pending name, Cancel is disabled, the form is aria-busy, and every close request (Escape, the header close button) does nothing.
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.
The body scrolls inside the drawer while the header and footer stay in view; 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 drawer fades in without sliding. The surface's own motion is Drawer's.

Form Layout Drawer / API and Development

Form Layout Sectioned / Usage