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" -->

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

1 participant