Modal
Back to complex components
Modals have several factors to take into account, not limited to focus trapping and focus management.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
THEN The screen reader should read out all the information on the modal.
AND I can see focus has been set on the first focusable element.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click "tab".
AND I reach the last focusable element.
THEN When I click tab again, focus should go to the first focusable element in the modal.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click "shift + tab".
AND I reach the first focusable element.
THEN When I click tab again, focus should go to the last focusable element in the modal.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click outside the modal on the 'overlay'.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click 'esc'.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click the close button.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
AND The modal opens successfully.
THEN The screen reader should read out all the information on the modal.
AND I can see focus has been set on the first focusable element.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click "tab".
AND I reach the last focusable element.
THEN When I click tab again, focus should go to the first focusable element in the modal.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click "shift + tab".
AND I reach the first focusable element.
THEN When I click tab again, focus should go to the last focusable element in the modal.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click outside the modal on the 'overlay'.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click 'esc'.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
WHEN I click on a button to open a modal.
AND The modal opens successfully.
AND I click the close button.
THEN The modal should close.
AND Focus should be set on the trigger that opened it.
More Information
Modals can be tricky. We use them in a React context so they are never on the page and get inserted as needed. If this was not the case, we would also need to use aria-hidden and toggle it on or off. The modal itself should have aria-role="dialog" and if no heading is visible, one still must be provided by any applicable ways (aria, hidden text, etc).