SfModal creates a modal window that opens on top of the main window. This component can be used to display important information that requires user interaction.
In addition to the UI aspect,
SfModal adds additional functionality that implements several best practices:
- Traps focus within the modal using the
- Allows the user to close the modal by pressing the
- Allows the user to close the modal by clicking outside of it.
The closing behavior can be disabled by setting the
disableEsc prop to
The visibility of the modal is controlled by
This example also uses the
useDisclosure function to provide nice controls for handling the modal's visibility.
You can make smooth transitions when the modal pops up.
SfModal sets the
aria-modal="true" attribute. Also, it sets the
Shift + Tab do not move focus outside the modal.
Since you may need to use this component in different contexts, there is no
role attribute set by default. Make sure to add proper
role based on your needs:
role="alertdialog"for dialogs where immediate user response is required. See details. (opens new window)
role="dialog"for generic dialogs. See details. (opens new window)
You should add
aria-label attributes to provide an accessible label for your modal - usually this value can be the title of the modal. To add more context, you should use the
Both techniques can be seen in the code examples above.