ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
91.89k stars 48.83k forks source link

Tooltip component accessibility is lacking #49891

Open Watso196 opened 2 months ago

Watso196 commented 2 months ago

Reproduction link

https://antd-reproduce-5x-yvsnjz.stackblitz.io

Steps to reproduce

  1. Turn on any screen reader
  2. Use keyboard Tab key to move focus to the link that triggers the tooltip

What is expected?

What is actually happening?

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.

github-actions[bot] commented 2 months ago

Hello @Watso196. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Watso196,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy