vuetifyjs/vuetify

[Feature Request] Add Aria-labels to VTreeview Buttons

Open

#21585 opened on Jun 17, 2025

View on GitHub
 (4 comments) (1 reaction) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VTreeviewT: enhancementa11ygood first issue

Description

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"

Contributor guide

Tech stack
typescriptvue
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue componentsAccessibility basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Examine the VTreeview component in the Vuetify source code (likely in src/components/VTreeview). Identify the button element for expand/collapse. Add a dynamic aria label using the node's label and state (expanded/collapsed). Follow existing aria label patterns in other Vuetify components. No linked PRs or assignees; the issue is open for contribution.