TooltipTrigger: Tooltip should remain hidden in the DOM to provide an IDREF for aria-describedby on trigger element
- 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
Assessment
This issue has not been assessed yet.