Accessibility: VoiceOver not reading highlighted options in dropdown on Safari (macOS)

[Hamze-Ammar]

We're experiencing an accessibility issue with the dropdown country selector in vue-tel-input when tested with VoiceOver on Safari (macOS). When navigating through the country list using the arrow keys, the active/focused option is not announced by the screen reader.

This makes the component inaccessible for screen reader users on Safari, which is a major concern for compliance with WCAG and inclusive design.

Steps to Reproduce:

• Open the official demo in Safari on a Mac.
• Enable VoiceOver (Cmd + F5).
• Focus the country code dropdown.
• Use the down/up arrow keys to navigate the list.

Expected Behavior:
As you move through the options, the currently focused option should be announced by VoiceOver.

Actual Behavior:
VoiceOver does not announce the current selection in the dropdown when navigating using the arrow keys. This issue does not occur in Chrome, where the focused options are properly announced.

Environment:

• Component: vue-tel-input
• Version tested: v8.3.1 (also reproducible in hosted demo)
• Browser: Safari 18.5 (macOS)
• Screen Reader: VoiceOver
• Device: MacBook Air (macOS Sequoia Version 15.5)

Notes:

• The dropdown uses role="listbox" and role="option", but the lack of proper aria-activedescendant or missing keyboard focus management might be the cause.
• Adding aria-activedescendant with correct focus updating might help.
• Similar issues were encountered in other custom select components where Safari required explicit focus and ARIA updates to work with VoiceOver.

Suggested Fix:
Ensure that the currently highlighted option has an id, and the input element (or dropdown trigger) has aria-activedescendant pointing to that id, and update it dynamically as the user navigates with keyboard.

Comparison:
Another phone input package has solved this issue successfully:
🔗 shadcn-vue-phone-input – Live Demo
This implementation works properly with VoiceOver on Safari — as the user navigates the dropdown, the active option is read aloud as expected. Reviewing their accessibility approach may help identify and resolve the gap in vue-tel-input.