Safari and VoiceOver, and the usage of aria-selected

[afercia]

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.

[kevin-brown]

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.

I've probably misinterpreted it, but I got the impression that aria-selected was to be used for the selected items (not necessarily just the currently focused one) from:

• https://www.w3.org/TR/wai-aria-practices/#dualfocus
• https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
• https://www.w3.org/TR/wai-aria-practices/#Listbox

I could just have a different idea of what selected means though. For most examples I've seen, the selected option was always the highlighted option (and the selection changed when the highlight changed), but for the example you gave this does not appear to be the case.

[afercia]

I could just have a different idea of what selected means though.

Yeah, to be honest I'm not sure if they should both have aria-selected=true, I mean the actual selected option/s and the "highlighted" ones. You know, sometimes specifications are a bit ambiguous and this is probably the reason why implementations differ. I'd lean towards a pragmatical approach :)
What we discovered working on the WordPress ticket is that it just didn't work for Safari+VoiceOver until we used aria-selected=true on the highlighted option.

My point is also about the fact screen readers will read out the options only when they're "highlighted" and in this case they will have aria-selected=true anyways.

Side note: I have a branch ready for a PR, but it should be merged after #4348 to make things work.

[kevin-brown]

An update on this, there is a planned change for Select2 4.1.0 where the aria-selected attribute will be used to handle focus instead of the select2-results__option--highlighted class. Most likely, the aria-selected attribute will also no longer be used to point to the selected options in the list, so we can try our best to not overload what aria-selected is used for.

/cc @select2/design

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kevin-brown]

This is still slated for Select2 4.1.0. And I've been thinking lately about getting this started early within the themes (including the Bootstrap ones) so there's a bit of time for people to transition versions.

One of the parts of that styling transition is going to involve using BEM classes in addition to using the [aria-selected] attribute within the styling of the results.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SmithRa]

@kevin-brown what is the timeframe on 4.1, and will a fix for this issue still be included?