Accessibility bug with VoiceOver involving slots and form fields

[jessking-hub]

Version

3.5.13

Reproduction link

codesandbox.io

Steps to reproduce

1. Open link in Safari browser on Desktop
2. Turn on Apple VoiceOver screen reader
3. Navigate with keyboard or VO commands to the input element
4. Listen to VoiceOver output of input label

What is expected?

The label text should be read out once by VoiceOver

What is actually happening?

The label text is being read out multiple times by VoiceOver

---

Vue is having issues with text passed as slots, especially involving form elements, being read out multiple times by Apple VoiceOver in Safari.

If I have an input set up as a custom component that accepts the value of the label text as a default slot, this label text is then dictated several times by Apple VoiceOver. To mitigate the issue in the short term, I have transitioned over to passing the label text as a prop. But this is undesirable and the issue is now popping up in other elements as well.

The problem can be resolved by wrapping the passed slot value with HTML, e.g. a span element. But if there is more markup inside of that wrapping element, the problem persists.

Environment:

• macOS 15.5
• Safari Version 18.5 (20621.2.5.11.8)
• Vite 5.4.11