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

Đang mở
  • Có gì không ổn?
#10,326 7 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu bằng cách đọc workaround VoiceOver hiện có trong @react-aria/combobox/src/useComboBox.ts, đặc biệt là focusAnnouncement và điều kiện isAppleDevice() của nó. So sánh hành vi đó với useAutocomplete và component Autocomplete RAC, sau đó xác minh reproduction trong tài liệu Autocomplete bằng Safari với VoiceOver. Công việc được xem là hoàn tất khi thao tác bằng phím mũi tên thông báo từng option đang được focus và trạng thái được chọn của option đó, hoặc khi hành vi dự kiến ở phía người dùng được ghi lại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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/[email protected]

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

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
2 ngày 17 giờ
Pull request đã merge (30 ngày)
41

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.