@amsterdam/design-system-css
Version:
Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.
30 lines (21 loc) • 1.43 kB
Markdown
<!-- @license CC0-1.0 -->
# Dialog
A popup window in which the user must perform an action to proceed.
## Guidelines
- Use dialogs sparingly because they interrupt the user’s workflow.
- Use a dialog for short and non-frequent tasks.
Consider using the main flow for regular tasks.
- Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
- To open the Dialog, use `Dialog.open(dialogId)` from the React package.
- To close it, either call the `Dialog.close` function or add a `<form>` as in the ‘confirmation’ example.
## Keyboard support
| key | function |
| :---------- | :--------------------------------------------------------------- |
| Tab | Moves focus to the next focusable element inside the dialog. |
| Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
| Escape | Closes the dialog. |
## References
- [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)
- [Return value](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue)
- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/)
- [Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)