Tooltip component accessibility is lacking #49891
Description
Reproduction link
https://antd-reproduce-5x-yvsnjz.stackblitz.io
Steps to reproduce
- Turn on any screen reader
- Use keyboard Tab key to move focus to the link that triggers the tooltip
What is expected?
- Screen reader should announce tooltip content with the trigger content
- Moving keyboard focus to the tooltip trigger should display tooltip content for keyboard users
What is actually happening?
- Moving keyboard focus to tooltip trigger does not display the tooltip content (there is also no easy way to make this happen from a dev perspective)
- Screen reader does not announce tooltip content when trigger is focused
| Environment | Info |
|---|---|
| antd | 5.19.2 |
| React | 18.3.1 |
| System | Sonoma 14.5 |
| Browser | Chrome Version 126.0.6478.127 (arm64) |
The tooltip content should be related to the tooltip trigger accessibly. This is done by adding the aria-describedby attribute to the tooltip's trigger element, and providing the tooltip content's id value to aria-describedby as its attribute value.
Developers should have an easy way to indicate that tooltip content should show up on hover and on focus. This allows keyboard only users to access the tooltip content. Providing an optional prop for displaying the tooltip on focus would be appropriate. But this also requires that the tooltip trigger be focusable, which is not something the AntD Tooltip component currently checks.