Skip to content

fix(VTreeviewItem): add aria-label to toggle button#22899

Closed
docpelux wants to merge 3 commits into
vuetifyjs:masterfrom
docpelux:fix-v-treeview-item-missing-aria-label
Closed

fix(VTreeviewItem): add aria-label to toggle button#22899
docpelux wants to merge 3 commits into
vuetifyjs:masterfrom
docpelux:fix-v-treeview-item-missing-aria-label

Conversation

@docpelux

@docpelux docpelux commented Jun 5, 2026

Copy link
Copy Markdown

Description

Adds an accessible aria-label to the expand/collapse toggle VBtn in VTreeviewItem using the locale composable.
The label toggles between "Expand" and "Collapse" based on the current open state.

Adds corresponding treeview.expand and treeview.collapse locale entries for en and it.

fixes #21585, fixes #22898

Example:

<template>
    <v-treeview
      :items="items"
      open-all
      item-value="id"
    />
</template>
  
<script setup>
  const items = [
    {
      id: 1,
      title: 'Root',
      children: [
        { id: 2, title: 'Child 1' },
        { id: 3, title: 'Child 2', children: [{ id: 4, title: 'Grandchild' }] },
      ],
    },
  ]
</script>

check with Accessibility Insights for Web, should display no issues.

docpelux added 3 commits June 5, 2026 11:17
Add accessible label to the expand/collapse toggle VBtn using locale
composable, toggling between 'Expand' and 'Collapse' based on the
current open state. Adds corresponding treeview locale entries.

fixes vuetifyjs#21585, fixes vuetifyjs#22898
@J-Sek

J-Sek commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

closing in favor of #22903

@J-Sek J-Sek closed this Jun 5, 2026
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 [Bug Report][4.1.0] VTreeviewItem toggle button missing aria-label (WCAG 4.1.2 violation)

2 participants