vuetifyjs/vuetify

[Feature Request] Add Aria-labels to VTreeview Buttons

Open

Aperta il 17 giu 2025

Vedi su GitHub
 (4 commenti) (1 reazione) (0 assegnatari)TypeScript (40.995 star) (7139 fork)batch import
C: VTreeviewT: enhancementa11ygood first issue

Descrizione

Problem to solve

Currently when using a VTreeview component the Expand/collapse button for each node of the Tree simply read by a Screen Reader as "Button" without any context as to what it does when activated.

Proposed solution

Add an aria label based on the current state and node label.

So if you have a tree like:

> Red
V Green
   > Orange

The buttons would read as "Expand Red", "Collapse Green", "Expand Orange"

Guida contributor

Tech stack
typescriptvue
Dominio
frontendaccessibility
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Vue componentsAccessibility basics
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
80
Direzione di ricerca
Esamina il componente VTreeview nel codice sorgente di Vuetify (probabilmente in src/components/VTreeview). Identifica l'elemento button per espandere/collassare. Aggiungi un aria label dinamico utilizzando l'etichetta e lo stato (espanso/collassato) del nodo. Segui i pattern esistenti di aria label in altri componenti Vuetify. Nessuna PR collegata o assegnatari; il problema è aperto per contributi.