A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element.
A dialog popover,
.slds-popover, can be applied to all variants of a dialog
popover. It initiates the styles of the popover and enables
.slds-nubbin to be applied.
A dialog popover requires at least one focusable element.
A popover is used to display contextual information to the user.
A popover can accept the following nubbin position classes,
- Popovers must come with a triggering button
- They must have at least one focusable element inside
- They should be implemented as a keyboard focus trap
- When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there
- Pressing the Escape the key as well as clicking the close button should close the Popover
- User focus should be placed back on the triggering button when the popover is closed
Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present in addition and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You should not move a user's focus without their expressed intent.
- The Popover element should have
dialogshould be labelled, this can be achieved in two ways:
- Apply the
aria-labelledbyattribute to the
dialogelement and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the
- If no Heading element is present, use the
aria-labelattribute and set the value to be a meaningful title of the
- Apply the
dialogshould be described where possible. This can be achieved by applying the
aria-describedbyattribute to the
dialogelement and set the value to be the id of the Popover body
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.