adobe / adobe/react-spectrum

TooltipTrigger: Tooltip should remain hidden in the DOM to provide an IDREF for aria-describedby on trigger element

Open
#2,101 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

TooltipTrigger: Tooltip should remain hidden in the DOM to provide an IDREF for aria-describedby on trigger element.

## 🤔 Expected Behavior

In order for the Tooltip to announce consistently when navigating elements using JAWS's virtual cursor or NVDA's browse mode, the Tooltip that displays as an overlay in a portal when the trigger is either hovered or focused should remain hidden in the DOM to provide an IDREF for `aria-describedby` on trigger element. The `triggerProps` returned by `useTooltipTrigger` should always include `aria-describedby` referencing the tooltip by `id`, regardless of whether the tooltip is visible in the portal or hidden in the DOM.

## 😯 Current Behavior

Currently, a tooltip is only rendered to the DOM when the TooltipTrigger `state.isOpen === true`. The tooltip and the `aria-describedby` attribute on its trigger get removed when `state.isOpen === false`. This means that the text of the tooltip is only announced when the user focuses or hovers the trigger, and is not available to screen reader users navigating using virtual cursor/browse mode.

## 💁 Possible Solution

Keep the Tooltip in the DOM with a `hidden` attribute when the tooltip is not shown.

## 🔦 Context

This is important for improving screen reader accessibility.

## 💻 Code Sample

See https://codepen.io/Moiety/pen/LaPvWy for a positive example in development for WAI-ARIA 1.2 Authoring Practices: https://w3c.github.io/aria-practices/#tooltip

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | @react-spectrum/tooltip@3.1.3, @react-aria/tooltip@3.1.2
| Browser | All
| Operating System | All

## 🧢 Your Company/Team

Adobe/Accessibility

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.