Alert Dialog

AlertDialog component is used interrupt the user with a mandatory confirmation or action.

Import

Chakra UI exports 7 alert dialog related components.

• AlertDialog: provides context and state for the dialog.
• AlertDialogHeader: should contain the title announced by screen readers.
• AlertDialogBody: should contain the description announced by screen readers.
• AlertDialogFooter: should contain the actions of the dialog.
• AlertDialogOverlay: The dimmed overlay behind the dialog.
• AlertDialogContent: The wrapper for the alert dialog's content.
• AlertDialogCloseButton: The button that closes the dialog.

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from '@outfitio/outkit';

Usage

AlertDialog requires that you provide the leastDestructiveRef prop.

Based on WAI-ARIA specifications, focus should be placed on the least destructive element when the dialog opens, to prevent users from accidentally confirming the destructive action.

Adding transition

The modal doesn't come with any transition by default so you can manage this yourself. Chakra exports two transition components SlideIn and Scale to provide simple transitions.

For some reason, focus doesn't return back to the trigger after the transition ends. As a walkaround, you might need to set finalFocusRef to the trigger or any other element, and set isOpen to true.

Accessibility

ARIA

• AlertDialog has role alertdialog, and aria-modal set to true.
• When the dialog opens, the content in the AlertDialogHeader and AlertDialogBody are announced by screen readers via aria-labelledby and aria-describedby attributes.

Keyboard support

• When the dialog opens, focus is automatically set to the least destructive element.
• Pressing esc closes the dialog.

Props

AlertDialog and it's components composes the Modal component, the only exception is that it requires a leastDestructiveRef which is similar to the initialFocusRef in Modal