[Bug Report][3.5.16] Indeterminate checkbox aria-checked doesn't match control value
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 3.5.16
Vue Version: 3.4.23
Browsers: Chrome 124.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Inspect the checkbox element
Expected Behavior
Since it is using a native HTML checkbox control, no aria-checked attribute should be present.
Actual Behavior
The checkbox control has aria-checked set to 'mixed' which doesn't match the native control's value.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
MDN article about aria checkbox role.
When using a native html checkbox, you should not need the role or aria-checked attributes. Because the VCheckbox does use the aria-checked attribute, it causes a mismatch between the control's value and the aria-checked value.
I suggest simply removing aria-checked from the control.
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.
Research direction
Use the linked reproduction to confirm the VCheckbox accessibility output, then locate the VCheckbox implementation responsible for aria-checked; the payload names no source file or test. Done means the native checkbox no longer exposes an aria-checked value that conflicts with its control state, with the reproduction still behaving correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100