Slideover
Used as a way to display additional information.
Placement
Place the main slideover component(s) ideally at the root level of the page just inside the body tag.
Component Behavior
Opens a slideover component with semi-transparent overlay to display additional information. Can be dismissed by clicking the overlay or the close button in the upper right corner.
Accessibility Guidelines
This component utilizes code from the
ARIA Authoring Practices Guide.
Main points:
- Has role="dialog"
- Has aria-modal="true"
- Slideover header has an ID so it can be used as aria-labelledby for the component
- Acts as a focus trap
- Escape key closes the slideover