Summary
This adds a keyboard trap when the modal is open so that the component can be ADA WCAG 2.0 compliant.
When a user opens a modal, this will keep all keyboard focusable elements inside the modal. The reason for this is that a keyboard user may open a modal and tab to content that is outside the modal and therefore not accessible.
A Web application brings up a dialog box. At the bottom of the dialog are two buttons, Cancel and OK. When the dialog has been opened, focus is trapped within the dialog; tabbing from the last control in the dialog takes focus to the first control in the dialog. The dialog is dismissed by activating the Cancel button or the OK button.
How to review this PR
[ ] Go to the Storybook modal component and also add <p>this is a test</p><p><button>click here</button><p>another test</p> right after line 49 in modal.twig.
[ ] Notice that when you open the modal, it tabs through the content of the model and not outside of it.
Summary This adds a keyboard trap when the modal is open so that the component can be ADA WCAG 2.0 compliant.
When a user opens a modal, this will keep all keyboard focusable elements inside the modal. The reason for this is that a keyboard user may open a modal and tab to content that is outside the modal and therefore not accessible.
From an example of success criterion in the WCAG 2.0 guidelines:
How to review this PR
<p>this is a test</p><p><button>click here</button><p>another test</p>right after line49inmodal.twig.