Drawer host

Accessibility

DrawerHost is a non-modal dialog. The accessible name is the active drawer's title. The heading is an h2. The close control's name is closeLabel.

Keyboard

Escape closes the drawer and moves focus to the trigger that opened it.
No trigger. Focus returns to the element that was focused before the drawer opened, such as a table row.
Nav strip. A radiogroup named by nav.label. Arrow keys move between segments. Each segment is named by its label.
Outside press closes the drawer. The rest of the page stays in the tab order.

Cancel a cancelable close with details.cancel() when a parent owns Escape, such as a confirm dialog inside the drawer. An outside press reports light-dismiss. Keep open true to ignore it.

Window

The dialog is in the trigger's owner document, including a pop-out opened with window.open. When that window changes, the drawer closes.

Drawer host / API and Development

Call Card / Usage

On this page

Keyboard

Window

Drawer host

Accessibility

DrawerHost is a non-modal dialog. The accessible name is the active drawer's title. The heading is an h2. The close control's name is closeLabel.

Keyboard

Escape closes the drawer and moves focus to the trigger that opened it.
No trigger. Focus returns to the element that was focused before the drawer opened, such as a table row.
Nav strip. A radiogroup named by nav.label. Arrow keys move between segments. Each segment is named by its label.
Outside press closes the drawer. The rest of the page stays in the tab order.

Cancel a cancelable close with details.cancel() when a parent owns Escape, such as a confirm dialog inside the drawer. An outside press reports light-dismiss. Keep open true to ignore it.

Window

The dialog is in the trigger's owner document, including a pop-out opened with window.open. When that window changes, the drawer closes.

Drawer host / API and Development

Call Card / Usage

On this page

Keyboard

Window