Non modal dialog pattern

A common pattern on the web is to show content on top of other content, drawing the user's attention to specific important information or actions that need to be taken. This pattern can technically be described as a non-modal dialog or popover. Cardan UI uses the Popover API and CSS anchor positioning for the Tooltip and Popover components.

Tooltip vs. Toggletip

A Tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Cardan UI uses Toggletips with live regions instead. Toggletips are revealed by click rather than by hover and focus. This pattern is more consistent across touch, mouse and keyboard controls.

Note: the Tooltip design pattern is work in progress; it does not yet have task force consensus.

Tooltip

Cardan UI offers a <Tooltip /> component for toggletips with static content.

Accessibility requirements

  • Use a button element to trigger the toggletip.
  • The trigger element has a clickable target area of at least 24px x 24px.
  • The trigger element has the aria-expanded attribute. The value should align with the open state of the toggletip.
    • When a popover is associated with a button with the popovertarget attribute, the browser automatically conveys and updates the expanded/collapsed state.
  • The trigger element has the aria-controls attribute. The value should refer to the ID of the toggletip.
    • The popovertarget attribute establishes the relationship (an implicit aria-details) between the trigger and the toggletip.
  • Focus stays on the triggering element while the toggletip is displayed.
  • The toggletip can be hidden with the Escape key.
  • The element that triggers the toggletip references the toggletip element with aria-describedby.
    • Don't describe toggletips with aria-describedby. It makes the trigger button non-functional to screen reader users.
  • The element that serves as the toggletip container has role="tooltip".
    • The role="tooltip" attribute is not applicable since we are using role="status" for the live region.

Popover

Cardan UI offers a <Popover /> component for interactive toggletips that can contain links or buttons.

Accessibility requirements

The Popover component is an interative toggletip without a live region. When the hidden menu appears, focus will be moved to the first menu item.

  • Use a button element to open or close the menu.
  • The trigger element has an aria-controls attribute. The value should refer to the ID of the menu.
  • The trigger element has aria-expanded attribute. The value should align with the open state of the toggletip.
    • When a popover is associated with a button with the popovertarget attribute, the browser will automatically convey whether the popover is expanded or collapsed.
  • Keyboard focus is trapped inside the menu.
  • The menu can be closed with the Escape key.