Skip to content

FeaturePopover

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the next focusable element. When the last element is reached, moves focus to the next focusable element outside of the popover.
Shift + TabMoves focus to the previous focusable element. When the first element is reached, moves focus to the previous focusable element outside of the popover.
EscCloses the popover.

Attributes

The following table describes attributes that component already has.

Attributes
ComponentAttributeUsage
FeaturePopover.Popperrole="dialog"Identifies the element as a dialog, indicating that its content is grouped and separated from the rest of the page content.
tabindex="0", autoFocusAutomatically focuses the entire popover when it opens, helping the user to locate it on the page, especially when several popovers open in sequence.

Considerations for developers

Attributes

The following table will help you to keep in mind the necessary attributes to make our components fully accessible in your interfaces.

Attributes
ComponentAttributeUsage
FeaturePopoverdisablePortalDisables rendering in a React portal. Add this property so that the popover follows the highlighted interface element in the focus and reading order. Refer to our example.
FeaturePopover.Popperaria-label or aria-labelledbyDefines an accessible name for the popover. Refer to our example.

Other recommendations

For more accessibility recommendations, refer to the common Accessibility guide.

Last updated:

Released under the MIT License.

Released under the MIT License.