-
-
Notifications
You must be signed in to change notification settings - Fork 6.2k
Description
See #3735.
Note: this issue is part of several steps that should be taken to make the Select2 list options accessible.
Specifically, the solution proposed here relies on the changes proposed in #4348
In order to make Safari+VoiceOver announce the options in the dropdown, the usage of the aria-selected
attribute should be reviewed. Currently, Select2 uses it to "store" the selected option/s. By the way, according to the spec and to the main working examples I've seen so far, it should be used also (or only?) on the "highlighted" option, i.e. when using the arrow keys to choose an option.
https://www.w3.org/TR/wai-aria-practices/#Listbox
Each selected list item should have aria-selected="true"
Real life working examples:
James Craig demo
https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html
The Twitter search:
Since the "highlighted" option must have aria-selected=true
maybe it's a bit pointless using this attribute to store the currently selected option. In fact, when it will be highlighted, it will have aria-selected=true
anyways. I'd propose to use a data attribute to store the currently selected option and use aria-selected=true
on the highlighted option.
FWIW, we've extensively tested this when working on the "inline link toolbar" in the WordPress editor, see https://core.trac.wordpress.org/ticket/36458
This would make Safari+VoiceOver finally announce the options in the list but, alas, only for the "flat" lists. About the nested ones, seems Safari has big troubles and I couldn't find a way to make it "understand" the emulated "optgroups", at least for now. Weird, but Chrome+VoiceOver do announce the nested groups so I guess it's something specific to Safari, seems it expects the options to be immediate children of the listbox element. This would need additional work and some serious investigations and testing, will open a separate issue.