Dialog

Accessible Dialog/Modal.

Implementation details

By default aria-label will be set as the title prop.

You can control this by passing the ariaLabel prop. If none have been passed, aria-label will contain nothing.

Please always use one or the other.

The close icon contains a Visually Hidden element. This provides a text version of the icon to screen readers.

All scrolling outside the Dialog is disabled. Focus is locked inside the Dialog window. Focus will also be returned to the Trigger element.

Usage

Focusing

By default the close icon is always focused on opening.

If you want another element to be focused on opening, you can specify data-autofocus on the element.

Internal scrolling

Props