Detail Drawer

Accessibility

Import DetailDrawer, DetailDrawerSection from @prepared911/ui/blocks/detail-drawer.

The panel is a dialog named by label. The record's title is the h2 inside it and each DetailDrawerSection title is an h3, so the heading order never skips.
Non-modal: the page behind stays reachable and the drawer traps no focus. Focus moves into the drawer on open, to the close control or the first control, and returns to the trigger, or to the element that was focused before it opened.
Escape closes the drawer through onOpenChange, unless the caller cancels it. With a dirty guard it opens the confirm dialog instead; a second Escape on the dialog keeps editing and leaves the drawer open, and focus stays inside the drawer.
The confirm dialog is an alertdialog named by its title and described by its explanation. Keep editing, the safe choice, takes focus first. A press outside never closes it.
The record strip is a radiogroup named by recordsLabel. The arrow keys move between records and report onRecordChange; the selected segment is the record on screen. The strip scrolls on the inline axis when the segments overflow.
While loading, the title is a skeleton and the heading keeps its name; the body is a skeleton named by loadingLabel, in a region marked aria-busy. Nothing is disabled.
The body is a scroll region. When it overflows with nothing focusable in it, it becomes a tab stop named by scrollRegionLabel, so a keyboard user can scroll it.
Every control in the header and footer is a native Button with a visible or aria-label name. The close control is named by closeLabel.
Layout uses logical properties: the drawer attaches to the inline-end edge, which is the left edge under right-to-left text, and the header, strip, and footer mirror.
Reduced motion and forced colors follow Drawer: the panel fades in without sliding, and the borders stay visible in forced colors. The block adds no motion of its own.
Secondary text (subtitle, section titles) uses the Subtle tier.

Detail Drawer / API and Development

Floating Toolbar / Usage

Detail Drawer

Accessibility

Import DetailDrawer, DetailDrawerSection from @prepared911/ui/blocks/detail-drawer.

The panel is a dialog named by label. The record's title is the h2 inside it and each DetailDrawerSection title is an h3, so the heading order never skips.
Non-modal: the page behind stays reachable and the drawer traps no focus. Focus moves into the drawer on open, to the close control or the first control, and returns to the trigger, or to the element that was focused before it opened.
Escape closes the drawer through onOpenChange, unless the caller cancels it. With a dirty guard it opens the confirm dialog instead; a second Escape on the dialog keeps editing and leaves the drawer open, and focus stays inside the drawer.
The confirm dialog is an alertdialog named by its title and described by its explanation. Keep editing, the safe choice, takes focus first. A press outside never closes it.
The record strip is a radiogroup named by recordsLabel. The arrow keys move between records and report onRecordChange; the selected segment is the record on screen. The strip scrolls on the inline axis when the segments overflow.
While loading, the title is a skeleton and the heading keeps its name; the body is a skeleton named by loadingLabel, in a region marked aria-busy. Nothing is disabled.
The body is a scroll region. When it overflows with nothing focusable in it, it becomes a tab stop named by scrollRegionLabel, so a keyboard user can scroll it.
Every control in the header and footer is a native Button with a visible or aria-label name. The close control is named by closeLabel.
Layout uses logical properties: the drawer attaches to the inline-end edge, which is the left edge under right-to-left text, and the header, strip, and footer mirror.
Reduced motion and forced colors follow Drawer: the panel fades in without sliding, and the borders stay visible in forced colors. The block adds no motion of its own.
Secondary text (subtitle, section titles) uses the Subtle tier.

Detail Drawer / API and Development

Floating Toolbar / Usage