Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
#437 0 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript

Direzione di ricerca

Inizia in src/OptionList.tsx, intorno alle righe 213-215, dove l’annuncio aria-live attualmente usa il valore del nodo attivo. Controlla i test esistenti di OptionList, quindi assicurati che gli annunci diano priorità a aria-label, al title di tipo string e infine a value; verifica che la suite di test pertinente copra ogni fallback.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
312
Fork
204
Merge medio
37m
PR unite (30g)
1

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/tree-select

Tutte le issue di react-component/tree-select

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.