Bug 167671

Summary: AX: activedescendant on combobox not honored correctly in VoiceOver
Product: WebKit Reporter: Kaelig <kaelig>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bgaraventa11, b, craigcarlyle, diegof79, dkote, ejdickison, ericliang, jcraig, kaelig, leslie.harper, marco.zehe, michael, michaelcpuckett, mvilleneuve, naman34, splaktar, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Mac   
OS: macOS 10.12   
URL: https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html
See Also: https://bugs.webkit.org/show_bug.cgi?id=32100
https://bugs.webkit.org/show_bug.cgi?id=161734
https://bugs.webkit.org/show_bug.cgi?id=269026

Description Kaelig 2017-01-31 15:46:34 PST
Steps to reproduce:

1. Go to https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html
2. Type "ca" in the text field (it has a role=combobox)
3. Hit "arrow down", this should select the "American Samoa" option

Actual: nothing is read
Expected: "American Samoa" is read

4. Hit "arrow down", this should select the "California" option

Actual: "American Samoa" is read
Expected: "California" is read
Comment 1 Radar WebKit Bug Importer 2017-01-31 15:46:47 PST
<rdar://problem/30297449>
Comment 2 Kaelig 2017-01-31 15:51:09 PST
Note that this makes combobox/listbox almost unusable to VoiceOver users.
Comment 3 Radar WebKit Bug Importer 2017-01-31 15:51:27 PST
<rdar://problem/30297583>
Comment 4 Kaelig 2017-03-13 12:10:23 PDT
A somewhat similar issue was reported in Chrome as well: https://bugs.chromium.org/p/chromium/issues/detail?id=666049
Comment 5 James Craig 2017-12-22 09:09:36 PST
*** Bug 167680 has been marked as a duplicate of this bug. ***
Comment 6 James Craig 2017-12-22 09:47:58 PST
<rdar://problem/30297449>
Comment 7 Michael Berger 2018-09-13 12:39:33 PDT
Just to note this is still happening in Safari + VoiceOver, but Chrome + Safari handles it properly.

https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html
Comment 8 Bryan Garaventa 2019-03-18 10:03:48 PDT
I'm still getting reports that this is still broken on the example at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match)/demo.htm

Can I get a status update on where this currently stands in dev?

Thanks,
Bryan
Comment 9 Eric Liang 2019-03-18 10:34:01 PDT
This will be fixed in VoiceOver
Comment 10 Michael Prentice 2019-07-18 20:09:35 PDT
https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html is working well for me with Safari Version 12.1.1 (14607.2.6.1.1) and macOS 10.14.5 (18F203).

It also seems to be working well with Chrome 75.
Comment 11 Kaelig 2019-07-18 22:18:22 PDT
Michael, I have exactly the same setup as you and the bug is still reproducible on my side.
Comment 12 iammatthew2 2019-12-20 14:46:08 PST
This is currently broken for me on Mojave 10.14.6 with Safari 13.0.4
Comment 13 James Craig 2020-06-01 16:40:58 PDT
<rdar://problem/63849438>
Comment 14 Diego Fernandez 2020-10-23 13:44:47 PDT
These examples use aria-activedescendant and they work as expected in Safari+VO:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
https://pattern-library.dequelabs.com/components/selects

Why they work? Because, in addition to active descendant they set aria-selected to active option.

I found that when I do that in my custom dropdown work in VO+Safari (Safari Version 14.0 15610.1.28.1.9, 15610 / macOS 10.15.7 (19H2)).

My understanding of aria-selected is that it indicates the current selection - not the active item. So this looks like a bug.

The w3 example selects uses the active item = value pattern, so aria-selected has the right semantics. 
The deque example requires an explicit selection, so aria-selected seems to be wrong there.

I tested an implementation without aria-selected in Chrome (86.0.4240.111)  and Firefox (83.0b3), and both announce the active descendant when I move between list items.
Comment 15 Elliot Dickison 2020-10-29 22:03:48 PDT
I ran into this issue today. VoiceOver (macOS 10.14.6) + Chrome (86.0) worked fine but VoiceOver (macOS 10.14.6) + Safari (14.0) didn't announce anything when the active descendant changed. I had aria-activedescendant set correctly on the listbox element *and* aria-selected set on the active descendent element as others have suggested.

I was able to work around the issue by removing an extra wrapper element that I had placed inside the listbox element for styling purposes (all of the listbox option elements were children of this wrapper, not of the listbox itself). When I removed the wrapper and moved the option elements up in the DOM tree to be *direct* children of the listbox Safari started announcing the active descendant. The WAI-ARIA Authoring Practices is pretty clear that the active descendant just needs to be a descendant, not a direct child.
Comment 16 James Craig 2021-06-11 13:35:03 PDT
As mentioned in #c10 this has been resolved and working in VoiceOver for a couple years, so I'm closing this orphaned bug report as Resolved. 

The other examples people have linked since then are almost certainly related but different bugs. Event if they're all about combobox+activedescendant, the markup or rendering instances are likely different. The best approach to get those resolved is to file a new bug for reduced test cases that you find are not working... I'll try to do that with some of these now.

Note: If I can't verify the linked instance bug on my system, but you're still seeing it on yours, there may be other factors at play. Include software versions, etc. Potentially attach VoiceOver preferences if it work in the default config but not with your preferred config.
Comment 17 James Craig 2021-06-11 13:55:09 PDT
FWIW @Kaelig, I'm looking at a bug that resolved this. Prior to the fix, this example did not work for me at all, but it does now. If you're still seeing this specific test case unresolved on your system, could you ping me offline? We can investigate what's different about the configs. Thanks.
Comment 18 Leslie 2021-08-20 14:22:37 PDT
I'm looking at a slight variant of this bug that seems to be happening when aria-haspopup is set to "grid". I'm not sure if that difference from the original example is the cause but the bug can be reproduced faithfully with this example page from w3c:

https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/grid-combo.html

When navigating through the options in the list using the arrow keys absolutely nothing is announced.

I can confirm that it works with VoiceOver/Chrome as well as VoiceOver/IOS Safari (14.1)
Comment 19 Naman Goel 2021-12-01 13:39:34 PST
This is still an issue and not fixed.
Comment 20 Dhawal 2022-04-12 02:22:27 PDT
We are still facing this issue in Safari.

Here's jsfiddle link if you want to check the implementation - https://jsfiddle.net/f5Larbnk/19/

Note that voiceover in the above fiddle works fine in Firefox, Chrome when active-descendant is updated.