Popovers display brief, contextual content until they are dismissed through interaction. They are triggered by clicking a page element.
Popovers are opened with a click or tap (not on hover).
Required elements for a popover include:
Popover content should be brief. A popover should contain no more than two paragraphs of text, or one image and one paragraph (for example, a product image with a review snippet).
A popover should contain no more than two links in its content. Interaction with these links should be optional. If interaction with such content is required to proceed, then use a modal instead of a popover.
To close a popover, select the X button within it, or anywhere outside of it.
When there's insufficient space to display a popover on-screen without visual clipping, it changes its orientation in relation to the triggering element.
On smaller breakpoints, popovers become centered overlays (similar to modals) that aren't positioned in relation to the triggering element. Again, tap the X button inside the popover, or anywhere on the tinted area outside of it, to close it.
Unlike modals, Tab and Shift + Tab will move focus outside a popover and thereby close it.
Tab key moves focus to the next tabbable element inside the popover. If focus is on the last tabbable element, then close the popover and return focus to the triggering element.
Shift + Tab keys moves focus to the previous tabbable element inside the modal. If focus is on the first tabbable element, then close the popover and return focus to the triggering element.
Escape key dismisses the popover. This is equivalent to selecting the X button within it.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for non-modal dialogs from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for non-modal dialogs from WAI-ARIA 1.1.
You may refer to these examples of modal dialogs from WAI-ARIA practices 1.1.