Tooltip

The Tooltip component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies.

While the aria-label and aria-labelledby attributes are not needed for the Tooltip component itself, it is important to ensure that the components passed as children can be perceived by assistive technologies. This ensures that the Tooltip component is accessible.

The content of children component is text, so it is read by screen reader.

<Tooltip
  content={
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  }
>
  <Text>Learn more.</Text>
</Tooltip>

The screen reader will announce: “Learn more. Lorem ipsum dolor sit amet.”.

The children element is an icon component. To achieve the accessibility of the Tooltip, adding an aria-label to the icon component is necessary.

<Tooltip
  content={
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  }
>
  <Airplane ariaLabel="More information" />
</Tooltip>

Once the icon is focused by the screen reader, it will announce: “More information”, followed by announcing the content of the tooltip: “Lorem ipsum dolor sit amet.”.

The Tooltip component renders a wrapping span with the role="button" attribute by default. Ensure that the trigger component is set as a non-interactive component (for example, using the asComponent prop) to avoid the accessibility violation of nesting interactive controls (Interactive controls must not be nested).