Modals are dialog overlays that prevent the user from interacting with rest of the website until an action is taken or the dialog is dismissed. They are purposefully disruptive, so should be used thoughtfully and sparingly.
Supply the modal’s summary copy id. Assistive technologies (such as screen readers) use this to attribute to associate static text with a widget, element groups, headings, definitions, etc. (Source)
aria-hidden="[state]"
.s-modal
Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source)
aria-label="[text]"
.s-modal--close
Labels the element for assistive technologies (such as screen readers). (Source)
aria-labelledby="[id]"
.s-modal
Supply the modal’s title id here. Assistive technologies (such as screen readers) use this to attribute to catalog the document objects correctly. (Source)
role="dialog"
.s-modal
Identifies dialog elements for assistive technologies (Source)
role="document"
.s-modal--dialog
Helps assistive technologies to switch their reading mode from the larger document to a focused dialog window. (Source)
Danger State
Not every modal is sunshine and rainbows. Sometimes there are potentially drastic things that could happen by hitting a confirm button in a modal—such as deleting an account. In moments like this, add the .has-danger class to .s-modal. Additionally, you should switch the buttons to .s-btn__danger.s-btn__filled, since the main call to action will be destructive.
Most modal dialogs look good by default, but may need some combination of .ws[x] or .wmx[x] classes applied to .s-modal--dialog. Additionally, the following class is available for modals: