Modal confirmationStatusrelease

Ask for confirmation from the user before executing an action.

Guidance

Use this pattern to add friction to severe actions to help prevent user errors.

Example

Dependencies and installation

Package	Installation
@stormid/modal	`npm i -S @stormid/modal`

Code

<button type="button" class="modal-confirmation__btn js-modal-confirmation__btn" aria-haspopup="dialog">Delete</button><div id="modal-confirmation" aria-labelledby="modal-label" role="region" class="js-modal-confirmation modal-confirmation modal-container" data-modal-toggle="js-modal-confirmation__btn"><div class="modal" role="dialog" aria-labelledby="modal-label" aria-describedby="modal-description"><h1 class="modal-confirmation__title" id="modal-label">Are you sure?</h1><form class="modal__form modal-confirmation__form" action="#"><p id="modal-description">This will permanently remove this item</p><div class="modal-confirmation__row"><button type="button" class="modal-confirmation__confirm">Delete</button><button type="button" class="modal-confirmation__cancel js-modal-confirmation__btn">Cancel</button></div></form></div></div>

import modal from '@stormid/modal';

modal('.js-modal-confirmation);

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the confirmation behaves visually and functionally as expected.

For validation in developer tools / web inspector

An HTML
```
<button>
```
element is used to open the confirmation modal
The opening
```
<button>
```
element should have an
```
aria-haspopup="dialog"
```
attribute
An HTML
```
<button>
```
element is used to close the confirmation modal
The confirmation modal should be an HTML element with a
```
role="dialog"
```
attribute. This element must contain everything that's visible within the modal when it opens
The confirmation modal element should either have an
```
aria-describedby
```
attribute which describes the content, or an
```
aria-labelledby
```
attribute that points to a visible
```
<h2>
```
element with a matching ID
The confirmation modal element should have an
```
aria-describedby
```
attribute that points to a visible element with a matching ID that describes the modal content
The element containing the modal should have a role="region" attribute (or be another valid landmark element), so that the modal can be contained within a valid page landmark when moved into position

For visual validation

Confirmation buttons should have a clearly visible focus style which meets accessibility contrast requirements
Confirmation buttons should be appropriately labelled to describe their functionality. If the design requires no visible text, a label should be added as an
```
aria-label
```
attribute on the
```
<button>
```
tag to meet accessibility requirements
Confirmation buttons should be no less than 44px x 44px in size (unless any of the allowed WCAG exceptions apply)
The confirmation modal should be hidden visually, hidden from keyboard access and not read by screenreaders when closed
The confirmation modal should be visible, available for keyboard access and read by screenreaders when opened

For functional validation

The confirmation button should be available to be tabbed to and activated via keyboard
The first available form input, button or link within the modal should receive visible focus when opened
When the confirmation modal is open, it should not be possible to access the page content underneith via mouse, keyboard or any other means
When the confirmation modal is open, the page behind must not be scrollable. The original scroll position must be restored when the modal is closed
When the confirmation modal is open, the user's tab should be 'trapped'. Tabbing should loop within the modal until the modal is closed
Pressing the 'escape' key on the keyboard should close the modal
When the modal is closed, visible focus should return to the button which opened the modal

UI Patterns