Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

[Feature Request] TreeSelect: Add "labelInAriaLive"-property for better accessibility

Offen
  • Stimmt etwas nicht?
#412 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
accessibility, frontend

Rechercherichtung

Beginne bei der TreeSelect-Komponente und finde den aria-live-Inhalt, der den aktiven Knoten beim Navigieren mit den Pfeiltasten ankündigt. Verfolge, wie der value und das label jedes Knotens verfügbar sind, und implementiere dann das optionale Verhalten labelInAriaLive mit false als Standardwert; die Aufgabe ist abgeschlossen, wenn Labels bei Aktivierung angekündigt werden und standardmäßig weiterhin Werte angekündigt werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

What problem does this feature solve?

If the user moves between TreeSelect options using arrow keys, the screenreader will always read out the value of the active node. It would be much better for accessibility (and more flexible), if I as a developer could decide to use labels for aria-live content instead of the values.

What does the proposed API look like?

New prop would be labelInAriaLive, and it would be false by default. This prob would then be used to decide whether to use the value or label of the selected item, when rendering the aria-live tag of the component.

Using the component with the implemented feature:

<TreeSelect
        labelInAriaLive={true} // This is the new prop
        treeDefaultExpandAll
        treeData={[{ value: 'parent', label: 'parent-label', children: [{ value: 'child', label: 'child-label' }] }]}
        multiple
      />
Vorherrschende Sprache
TypeScript
Sterne
312
Forks
205
Ø Merge
37 Min.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-component/tree-select

Alle Issues in react-component/tree-select

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.