Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Screen reader announces 'value' prop instead of 'title' or 'aria-label' prop

オープン
#437 コメント 0 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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:

  1. 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.
  2. title: If the aria-label prop is not provided, the title prop 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.
  3. value: If neither an aria-label prop nor a suitable title prop (of string type) is provided, the value prop 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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react-component/tree-select のほかの issue

react-component/tree-select の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。