Krafters UI 1.4.7

Non modal dialog pattern

A common pattern on the web is to show content over 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. Krafters UI offers 2 components: Tooltip and Popover.

Krafters UI uses VueTippy for these components. In the future this package could be replaced with the Popover API when anchor positioning will be supported in all modern browsers.

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. Krafters 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.

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.
  • The trigger element has the aria-controls attribute. The value should refer to the ID of 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

Krafters 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 aria-expanded attribute. The value should align with the open state of the toggletip.
  • The trigger element has an aria-controls attribute. The value should refer to the ID of the menu.
  • Keyboard focus is trapped inside the menu.
  • The menu can be closed with the Escape key.