Bug: Options length is announced incorrectly by screen readers
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 25/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 停滞
- 技術スタック
- react, typescript
調査の方向性
まず、listbox が現在のオプションと隣接するオプションをレンダリングしている OptionList.tsx の274〜276行目付近を読んでください。その動作を、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分
- マージ済み PR(30日)
- 2
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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 件 ·
-
難易度 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
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
receptron/mulmoterminal#2264 ·
-
documentation
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
components-web-app/docs#96 ·
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
simonsobs/tileviewer#114 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100