Skip to content

Autocomplete: VoiceOver doesn't announce the focused option while arrowing #10326

Description

@loicplaire

Provide a general summary of the issue here

VoiceOver doesn't announce the virtually focused option when arrowing through an Autocomplete composing a ListBox. aria-activedescendant updates correctly on the input, but VoiceOver doesn't track it, so arrowing through the options is silent. [rest unchanged]

The useComboBox hook solves this exact problem with an internal live announcer on Apple devices, but the autocomplete stack has no equivalent: not useAutocomplete and not the Autocomplete RAC component.

🤔 Expected Behavior?

Arrowing through the options announces each one, like ComboBox does. useComboBox detects that VoiceOver doesn't follow aria-activedescendant and announces the focused option through a live region (focusAnnouncement in @react-aria/combobox/src/useComboBox.ts, gated on isAppleDevice()): the option's text plus its selected state.

😯 Current Behavior

With VoiceOver running in Safari, pressing ArrowDown/ArrowUp in the autocomplete input moves the visual focus ring and updates aria-activedescendant, but VoiceOver says nothing.
A VO user has no way to know which option is focused, or that anything happened at all. From my testing, the examples in your own docs reproduce this.
For comparison, the ComboBox docs examples announce each option while arrowing, so the two patterns behave very differently under VoiceOver despite both using virtual focus.

💁 Possible Solution

Keen to hear your suggestion here or the reasoning for not porting this behaviour. I am also aware this is current in RC and mindful it might be in the final hook?

If this is intentional and consumers are expected to provide their own announcements when composing with useAutocomplete, it'd be great to have that documented.

🔦 Context

I am building a filterable MultiSelect for our design system, composing useAutocomplete + useListBox with virtual focus, following the pattern from your docs. During screen reader testing we found VoiceOver users couldn't browse the options at all. NVDA is fine (it tracks aria-activedescendant natively). We initially assumed we'd diverged from the reference implementation somewhere, until we tested your docs examples and saw the same behaviour, then found the announcer inside useComboBox that papers over this for ComboBox only.

🖥️ Steps to Reproduce

  1. Open the ListBox example on the Autocomplete docs page (https://react-spectrum.adobe.com/react-aria/Autocomplete.html) in Safari on macOS.
  2. Turn on VoiceOver
  3. Click into the search input and press ArrowDown a few times.
  4. VoiceOver announces nothing as the focus ring moves through the options. Compare with a ComboBox docs example, which also uses a ListBox with virtual focus: there each option is announced while arrowing.

Version

@react-aria/autocomplete@3.0.0-rc.8

What browsers are you seeing the problem on?

Safari 26.5.2

If other, please specify.

No response

What operating system are you using?

macOS Tahoe 26.5.2

🧢 Your Company/Team

Atomi

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions