Skip to content

fix(VTreeview): add aria-label to expand/collapse toggle buttons#22953

Closed
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/treeview-aria-expand-collapse-21585
Closed

fix(VTreeview): add aria-label to expand/collapse toggle buttons#22953
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/treeview-aria-expand-collapse-21585

Conversation

@sridhar-3009

Copy link
Copy Markdown

Fixes #21585

Problem

Screen readers announce VTreeview expand/collapse toggle buttons as just "Button" with no context about which node they control or what action they perform.

Solution

  • Added expanded prop to VTreeviewItem to track the open/collapsed state of a tree node
  • Added useLocale to VTreeviewItem and set aria-label on the toggle VBtn using i18n keys
  • Added treeview.expand and treeview.collapse locale keys to en.ts with {0} placeholder for the node title
  • Pass expanded: isOpen from the VTreeviewChildren activator slot into listItemProps

With this change, screen readers will announce something like "Expand Fruits" or "Collapse Fruits" instead of just "Button".

@sridhar-3009 sridhar-3009 force-pushed the fix/treeview-aria-expand-collapse-21585 branch from 671a73e to 8647019 Compare June 28, 2026 11:32
@J-Sek

J-Sek commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

closing in favor of #22903

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