Skip to main content

toBeAccessibleTooltip()

Note

This design pattern is work in progress; it does not yet have ARIA Authoring Practices Task Force consensus. Progress and discussions are captured here.

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

It typically appears after a small delay and disappears when Escape is pressed or on mouse out. Tooltip widgets do not receive focus.

Hey, listen!

Usage​

The toBeAccessibleTooltip matcher expects to be called on the tooltip trigger. The tooltip element will be obtained through the aria-describedby reference on the trigger element.

Syntax​

import { render, screen } from '@testing-library/react'
import { Tooltip } from 'your-component-library'

test('tooltip', () => {
  render(<Tooltip content="tooltip content">Hey, listen!</Tooltip>)

  expect(screen.getByTestId('tooltip-trigger')).toBeAccessibleTooltip()
})

Test Summary​

The matcher tests the following:

✓ trigger element is part of tab sequence
✓ trigger element has attribute aria-describedby
✓ tooltip element has role tooltip
✓ tooltip element is accessible when trigger is focused
✓ tooltip element is hidden on {Escape}

WAI-ARIA Roles, States, and Properties​

1. The widget has a role of tooltip.​

<!-- ✓ element has role tooltip -->
<div role="tooltip">hey, listen!</div>

<!-- ❌ element has role tooltip -->
<span>hey, listen!</span>

2. The tooltip trigger references the tooltip element with aria-describedby.​

<!-- ✓ trigger element has aria-describedby -->
<div aria-describedby="tooltip-content">hover me</div>
<div id="tooltip-content" role="tooltip">hey, listen!</div>

<!-- ❌ trigger element has aria-describedby -->
<div>hover me</div>
<div id="tooltip-content" role="tooltip">hey, listen!</div>

Keyboard Interaction​

  • Tab: focuses the trigger element.
  • Escape: dismisses the tooltip element.

External Resources​

Web Accessibility Initiative​