Modal

A modal disables page content and focuses the user's attention on a single task or message.

status: draft

Props

Slots

• header
• default
• footer
• close-button

CSS Classes

• size: usa-modal--lg

External Libraries

• None

Sub-Components

• Implement UsaModalCloseButton component #57

Dependencies

• Implement UsaOverlay component #58
• v-usa-modal directive

Notes

• v-model for modal open state.

Tests

1. When the size prop value is lg, the CSS class usa-modal--lg is applied.
2. When the forceAction prop is true, the modal close button is not rendered.
3. When the modal is open, the overlay component is display underneath it.
4. When the modal is open and the forceAction prop is false, clicking the overlay closes the modal.
5. When the modal is open and the forceAction prop is false, pressing the escape key closes the modal.
6. When the modal is open and the forceAction prop is false, clicking the close button closes the modal.
7. When the modal is open, focus is "trapped" to elements within the modal.
8. When the modal is open, the page content underneath cannot be scrolled.
9. The open button should render at the bottom of the model, but display at the top right.
10. The root element should have a aria-labelledby set to the id of the heading.
11. The root element should have a aria-describedby set to the id of the body text.
12. When the heading prop is used, the text is added as the modal heading.
13. When the heading slot is used, the content is added as the modal heading.
14. When the heading prop and slot are both used, the heading slot will override the heading prop.