Dialog

A Dialog is an overlay that displays relevant information or a short task.

What the component handles

  • role="dialog" and aria-modal="true" are automatically applied
  • Focus moves to first focusable element when dialog opens
  • Focus trap - keyboard navigation loops within dialog until closed
  • Close button is appropriately labeled with dialog title for screen readers

What you need to provide

  • anchorElement prop to return focus to the correct element when closed