Skip to content

Safari and VoiceOver, and the usage of aria-selected #4349

@afercia

Description

@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

01 webkit example

The Twitter search:

02 twitter search combobox

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions