Dialog

Surfaces

Overview

This is a modal dialog built using the native dialog tag and using its native methods showModal() to open it and close() to close it.

Live example

Usage

title: the accessible name of the dialog comes from the aria-labelledby attribute and receives focus on open. Focus returns to the control that opened it on close.
showModal() method: native method of the dialog tag to open it. It makes the page behind inert, and a backdrop.
variant="drawer" slides in from position left or right.
There should always be an exit mechanism such as a button to "Close dialog".

Accessibility

Keyboard interaction

Enter or Space on the button opens the dialog. Focus moves to the title.
Tab moves forward through the controls inside the dialog in reading order: the close button first, then the content. From the last control it wraps to the first interactive element inside the dialog.
Shift+Tab moves back. From the close button, or from the title, if it is on the first interactive element inside the dialog the focus will be placed on the last interactive element.
Escape closes the dialog, and focus returns to the control that opened it.
Enter or Space on the close button returns the focus to the opener.
The page behind is inert and Tab key never reaches it.

Focus trap

The dialog tag has a native focus trap BUT it considers the interactive UI widgets of the browser part of the focus flow. In my opinion, this is a blocker for keyboard or screen reader users because if a dialog contains 3 interactive elements, they will have to also navigates through the UI interactive elements making their experience worse. In order to avoid this, I implemented a custom focus trap.

This section is still in progress.

References