Modal
Demonstration
Code
The Modal Pattern is an accessible modal dialog that focuses user attention on a specific task. It follows the same usage guidelines of the Modal Component in the U.S. Web Design System (USWDS). It uses the Patterns Scripts dialog utility to achieve the showing, hiding, and attribute toggling. The animation uses CSS and will be disabled by devices using the prefers-reduced-motion
@media query.
The element will be hidden from screen readers using the aria-hidden attribute and potentially focusable children will have their tabindex set to -1 when the modal is hidden. When the modal is opened, focus will shift from the data-dialog="open" element to the data-dialog="close" element inside the modal. The focus will be trapped, meaning tabbing focus will cycle through elements within the dialog.
Additionally, scrolling can be disabled with the data-dialog-lock="true" attribute on the opening element trigger. This will toggle overflow-hidden on the body element until the dialog is dismissed. overflow-hidden is a Tailwindcss utility that will need to be set in your stylesheet if it doesn’t exist (for example .overflow-hidden { overflow: hidden }).
The Modal may be used by either the global stylesheet or module import.
Global Stylesheet and JavaScript
The Modal will display correctly with the global stylesheet.
<link href="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.19/dist/css/default.css" rel="stylesheet">
The Modal requires JavaScript for showing, hiding, and screen reader accessibility. To initialize the Modal instance from the global script use the following code:
<script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.19/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.modal(); </script>
This function will attach the Modal toggling event to the body of the document.
Stylesheet and JavaScript Module Import
The Modal includes two stylesheets. One sets the default design tokens using CSS Custom Properties, and another adds custom styles.
@forward '@nycopportunity/pattern-modal/src/tokens.css'; @forward '@nycopportunity/standard/objects/modal/_modal.scss';
The Modal JavaScript source exists in the Pattern Modal module, which is a dependency of the Opportunity Standard.
import Modal from '@nycopportunity/pattern-modal/src/modal'; new Modal();