Bug: Options length is announced incorrectly by screen readers
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 25/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
调研方向
首先阅读 OptionList.tsx 第 274-276 行附近的代码，这里是 listbox 渲染当前选项及相邻选项的地方。将其行为与 PR 805 中提议的完整列表渲染进行比较。当屏幕阅读器能播报每个选项的正确位置以及完整选项列表的长度时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
Description
When navigating the select component with keyboard + screen reader (i am using Screen Reader extension in Chrome, but issue is similar with all screen readers), the current options is always announced as "[options label], not selected, 2 of 3". This gives the erroneous impression that there are only 3 options in the dropdown, when there might be many more, and is confusing to the user. Instead, the correct position and full length of options list should be announced (e.g. when focus is in options 3 of a list of 8 options, it should be announced as "[option label], not selected, 3 of 8")
How to Reproduce Bug
Open a page where the Select component is present. Have a screen reader on and navigate to Select component by pressing tab. Open dropdown. Depending on the screen reader you're using the announcement might differ a little, but in general it announces a list of 2 or 3 items.
Technical description of the issue
The problem can be seen in OptionList.tsx, line 274-276. I don't know for what reason it is implemented like this, but the [role="listbox"] element should contain all options, and not just the current item and the adjacent ones.
Proposed solution
Render all the options inside the listbox element. This way the length of the list and position of the element will be announced correctly.
I've already created a PR for this, where the rendering is optional by passing the prop renderFullOptionList={true} to the Select component, but I don't see a good reason why this wouldn't be the default and only way it renders
Open for suggestions or ways to achieve the desired result in other ways.
Thanks!
- 主要语言
- TypeScript
- 星标
- 938
- 派生
- 482
- 平均合并
- 15 小时 8 分钟
- 30 天内合并 PR
- 2
环境准备
我们还没有检查这个项目的环境配置文件。先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react-component/select 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 35/100
react-component/select#1216 ·
-
难度 2/5 1-3 小时 新手友好度 45/100
react-component/select#1159 ·
-
a11y 问题未关闭
难度 3/5 1-2 天 新手友好度 35/100
react-component/select#1087 · 1 个 reaction ·
-
难度 3/5 1-2 天 新手友好度 25/100
react-component/select#1086 ·
-
难度 3/5 1-2 天 新手友好度 30/100
react-component/select#1082 · 1 条评论 ·
查看 react-component/select 的全部 Issue
相似的 Issue
-
docs
难度 1/5 1 小时以内 新手友好度 68/100
remix-run/react-router#15558 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
solana-foundation/pay-kit#341 ·
维护者通常 1 天内回复
-
难度 1/5 1-3 小时 新手友好度 88/100
supabase/agent-skills#607 ·
-
enhancement
难度 2/5 1-3 小时 新手友好度 88/100
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复