[Feature Request] Add aria-disabled attribute to disabled VBtn components for improved accessibility
@Haviles04 is already working on this.
Since Sep 18, 2025.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
Currently, when a v-btn component is disabled using the disabled prop, it only applies visual styling (CSS classes) and prevents interactions, but lacks proper ARIA attributes for accessibility. This creates several issues:
Screen readers cannot properly announce the disabled state to users with visual impairments
Automated testing becomes difficult when trying to target disabled buttons
Does not follow WCAG 2.1 accessibility guidelines for disabled interactive elements
Inconsistent with modern web accessibility standards that recommend using aria-disabled="true" instead of or alongside the disabled attribute
<!-- Current output for disabled button -->
<button class="v-btn v-btn--disabled" disabled>
Click me
</button>
<!-- Expected output with proper ARIA support -->
<button class="v-btn v-btn--disabled" disabled aria-disabled="true">
Click me
</button>
This issue is part of a broader accessibility improvement effort. Similar issues may exist in other components like:
v-text-field (disabled inputs)
v-select (disabled selectors)
v-checkbox (disabled checkboxes)
Time picker clock items (already reported separately)
Visual error in storybook testing
Proposed solution
Add the aria-disabled="true" attribute to VBtn components when the disabled prop is set to true. This should be implemented in the VBtn component to:
Automatically add aria-disabled="true" when disabled prop is true
Ensure the attribute is not present when the button is enabled
Maintain backward compatibility with existing implementations
Follow the same pattern used in other Vuetify components that support disabled states
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.