Screen reader announces 'value' prop instead of 'title' or 'aria-label' prop
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 48/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 停滞
- 技術スタック
- react, typescript
調査の方向性
src/OptionList.tsx の213-215行目付近から始めます。そこでは aria-live のアナウンスが現在アクティブなノードの値を使用しています。既存の OptionList テストを確認し、アナウンスが aria-label、string 型の title、最後に value の順で優先するようにします。関連するテストスイートで各 fallback がカバーされていることを確認します。
索引モデルが issue の本文から書いたものです。
説明
Problem:
The value prop of a tree node is often a numeric id, unique hash, or other non-human-readable identifier. Currently when navigating the Tree Select dropdown using a screen reader, each option's value prop is announced instead of either the title or aria-label prop. This makes it impossible for screen reader users to understand the options being presented.
Expected behavior:
I would suggest that the screen reader prioritize which prop to announce in the following order:
aria-label: If provided, this should be the primary prop announced by the screen reader. It is expected to contain the most accessible and human-readable description of the node.title: If thearia-labelprop is not provided, thetitleprop should be announced since this is the actual content displayed in the dropdown. However, as the 'title' prop can be either a string or a React element, the screen reader should only announce it if it is of type string.value: If neither anaria-labelprop nor a suitabletitleprop (of string type) is provided, thevalueprop should be announced.
Suspected Cause:
The span element within the dropdown in OptionList.tsx, which has aria-live="assertive" applied, seems to always announce the value of the active node, even when an aria-label is present. This should be modified to instead announce the human-readable props according to the order above.
https://github.com/react-component/tree-select/blob/master/src/OptionList.tsx#L213-L215
Related issues/PRs:
ant-design/ant-design#40055 - Existing Ant Design issue related to this problem.
ant-design/ant-design#41978 - Allows aria-label prop to be passed into rc-tree-select (released in antd@5.4.6)
react-component/tree-select#413 - This open PR proposes a labelInAriaLive boolean prop, which if true would announce the title prop instead of the value prop. Although this does not account for an aria-label prop being set on the node, which should be prioritized by the screenreader first.
react-component/tree-select#426 - This PR attempted to solve this issue but was closed without being merged.
- 主要言語
- TypeScript
- スター
- 312
- フォーク
- 204
- 平均マージ
- 37分
- マージ済み PR(30日)
- 1
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/tree-select のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 52/100
react-component/tree-select#652 ·
-
treeTitleRender 回显时函数中的targetItem中只有value属性,只return targetItem.label时有效,return 拼接数据只能获取到value属性 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
react-component/tree-select#528 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 35/100
react-component/tree-select#485 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 28/100
react-component/tree-select#466 ·
-
DFS这里是否能调整为尾递归 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/tree-select#454 ·
react-component/tree-select の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
TanStack/tanstack.com#1293 ·