Dialog Component

[joshblack]

About

<Dialog> is a primitive used to create modal and non-modal dialogs.

Accessibility

• When dialog is activated focus is moved to the dialog.
• Default initial focus is on the first interactive element in the dialog.
• The dialog should have an accessible name and announce itself as a "dialog".
• The dialog should be dismissable by
  • activating a "close" button inside the dialog
  • pressing the escape key
  • blurring the dialog by clicking or tapping outside of it
• If the dialog is modal obscured contents should be inert and inaccessible via keyboard and virtual cursor by constraining focus to the dialog in a "ring".
• If the dialog is non-modal keyboard and virtual cursor focus is not constrained to the dialog and can leave the dialog causing it to close.
• When the dialog is closed focus should return to the triggering element unless the dialog is non-modal and was closed by focus or virtual cursor leaving the dialog.

Links & Resources

• https://w3c.github.io/aria-practices/#dialog_modal
• https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/
• https://www.scottohara.me/blog/2019/03/05/open-dialog.html
• https://www.youtube.com/watch?v=JS68faEUduk
• https://svinkle.github.io/launchy/
• https://github.com/WICG/inert
• https://github.com/scottaohara/accessible_modal_window

API Design

function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <Button onClick={() => setOpen(true)}>Open Dialog</Button>
    <Dialog open={open} onDismiss={() => setOpen(false)}>
      {children}
    </Dialog>
  );
}

Props

Name	Type	Description
children	Node
modal	boolean	Specify if the dialog is a modal or non-modal dialog
onDismiss	Function
open	boolean
initialFocusRef	Object	A ref for the node that is focused when the dialog is opened

Links & Resources

• https://reach.tech/dialog
• https://react-spectrum.adobe.com/react-spectrum/Dialog.html
• https://chakra-ui.com/docs/overlay/modal
• https://www.radix-ui.com/docs/primitives/components/dialog

Requirements

• Both modal and nonmodal dialogs are supported
• TODO

Open issues

• AVT 3 - Modal React Component: iOS Focus Trap #2739

Explorations

• CodeSandbox

useDialog hook

function Demo() {
  const { open, close } = useDialog();
}