[Bug Report][3.11.7] Menu items in v-menu have no accessible labels with VoiceOver on Safari (probably aria-owns issue)
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.11.7
Vue Version: 3.5.27
OS: macOS 10.15.7 (current)
Steps to reproduce
- Use VoiceOver with Safari
- Open VMenu
- Navigate to menu item
Expected Behavior
VoiceOver reads out the labels, e.g. "Click Me, menu item"
Actual Behavior
VoiceOver only reads out "menu item" without the labels.
(For Testing) Remove aria-owns form the DOM, then labels are there.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
It seems like this commit https://github.com/vuetifyjs/vuetify/commit/975a18cc2dd4ef197a6ab6ca49f81788f9b4f638 introduced the bug to Safari. In Chrome everything works. Vuetify 3.10.7 is the last working version for Safari.
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
Start by reproducing the issue with VMenu, VoiceOver, and Safari, then inspect the change introduced by commit 975a18cc2dd4ef197a6ab6ca49f81788f9b4f638. Check how aria-owns affects menu-item labels and compare Safari with Chrome and Vuetify 3.10.7; done means VoiceOver reads each item's label and role in the current version.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100