Make WordPress Core

Opened 20 months ago

Last modified 2 months ago

#38637 new defect (bug)

Fix autocomplete search suggestions support for Safari + VoiceOver

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch
Focuses: ui, accessibility, javascript Cc:


Splitting this out from #33902.

The first implementation of a combobox with autocomplete search suggestions was the link inline toolbar in the Editor, implemented in #33301. In a first moment, that didn't work for Safari + VoiceOver, and a specific fix was introduced in WordPress 4.5.1, see #36458. Worth noting the fix was extensively tested and confirmed to solve the issue. That was on El Capitan + Safari 9 + VoiceOver.

Now, some months later, both the link inline toolbar suggestions and the new implementation for the Tags autocomplete (see #33902) are not announced correctly when using Safari + VoiceOver, that is macOS Sierra + Safari 10 + VoiceOver. Not sure why, sometimes the wrong option gets announced. See screenshot below:


Whether or not it's a Sierra/Safari 10 regression (very likely) a possible fix should be investigated. Note: the only example I've found working it's the Twitter search suggestion, which is a very similar implementation, so investigation should probably start from there. Any feedback welcome :)

Change History (3)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

20 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

4 months ago

#3 @afercia
2 months ago

In ARIA 1.1 something has changed for the ~combobox` implementation, see https://www.w3.org/TR/wai-aria-practices/#combobox

NOTE The options for a combobox to popup a grid, tree, or dialog were introduced in ARIA 1.1. Changes made in the ARIA 1.1 specification also add support for a code pattern that enables assistive technologies to present the textbox and popup as separately perceivable elements. both ARIA 1.0 and 1.1 patterns are described in the following sections. While using the ARIA 1.1 pattern is recommended as soon as assistive technology support is sufficient, there are no plans to deprecate the ARIA 1.0 pattern.

Seems to me the old ARIA 1.0 example still doesn't work perfectly with Safari (version 11.1 at the moment) and VoiceOver, see https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html

Instead, seems to me the new ARIA 1.1 pattern works better. Some testing with various browsers / screen readers combinations would be greatly appreciated, specifically on these three examples:

ARIA 1.0 autocomplete "list": https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html

ARIA 1.0 autocomplete "both": https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html

ARIA 1.1 autocomplete "list" new pattern: https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

Note: See TracTickets for help on using tickets.