Skip to content

feat(VTreeview): add aria-label and aria-expanded to expand/collapse buttons#22946

Open
mmustafasenoglu wants to merge 2 commits into
vuetifyjs:masterfrom
mmustafasenoglu:feat-treeview-aria-labels
Open

feat(VTreeview): add aria-label and aria-expanded to expand/collapse buttons#22946
mmustafasenoglu wants to merge 2 commits into
vuetifyjs:masterfrom
mmustafasenoglu:feat-treeview-aria-labels

Conversation

@mmustafasenoglu

Copy link
Copy Markdown

Description

Adds accessibility attributes to the expand/collapse buttons in VTreeview. Screen readers will now announce "Expand [item]" / "Collapse [item]" instead of just "Button".

Fixes #21585

Motivation

Currently, screen readers announce the expand/collapse buttons in VTreeview simply as "Button" without any context about what the button does. This makes the treeview inaccessible for users relying on assistive technologies.

Changes

  • Added isOpen prop to VTreeviewItem to receive the open state from parent
  • VTreeviewGroup now passes its isOpen state to VTreeviewItem via defaults
  • Added aria-label ("Expand [title]" / "Collapse [title]") to the toggle button
  • Added aria-expanded attribute to indicate the current state

Before

<button></button>  <!-- Screen reader: "Button" -->

After

<button aria-label="Expand Red" aria-expanded="false"></button>
<!-- Screen reader: "Expand Red, collapsed" -->

@mmustafasenoglu

Copy link
Copy Markdown
Author

Thanks for the review consideration!

I've added aria-label and aria-expanded attributes to the VTreeview expand/collapse buttons so screen readers can properly announce the item name and state (e.g., "Expand Red" / "Collapse Red").

Let me know if you need any adjustments to the accessibility attributes.

@J-Sek

J-Sek commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Please compare against #22903 and let me know if that PR can be improved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add Aria-labels to VTreeview Buttons

2 participants