Slash inserter: VoiceOver doesn't read the correct menu option names.

[kjellr]

Describe the bug

VoiceOver's narration of the items in the / inserter is often out of sync with the actual selection.

To Reproduce

1. Activate VoiceOver
2. In a new line, type / to open the slash inserter.
3. Navigate down through the list, and check to see if the selected item matches the spoken text.

Expected behavior

I expected VoiceOver to read the correct block names.

Actual behavior

When you first hit /, VoiceOver lets you know there are 10 results, but it does not alert you to the currently selected option. As you begin to navigate down using the arrow keys, VoiceOver often says the incorrect block name.

Screenshots

Desktop

• OS: Mac OS 10.13.6
• Safari 11.1.2
• Gutenberg 3.4

[afercia]

Noting there's also a core Trac ticket about this issue, where "sometimes the wrong option gets announced". See https://core.trac.wordpress.org/ticket/38637

[timwright12]

@kjellr @afercia Looks like this may have been fixed in Safari. Tested in v12.01 and could not replicate. If I had to guess I'd say that this was caused by the initial focus of the popover being set to the first item instead of the container, so there was an offset happening.

Ran the test three times with the same results.

[afercia]

@timwright12 Thanks for looking into this. Yep, seems to me this is something that regressed at some point in Safari / VoiceOver and it relates to all the ARIA combobox implementations, not only the Gutenberg inserter.

As mentioned in https://core.trac.wordpress.org/ticket/38637 the classic editor Tags autocompleter used to work in macOS El Capitan + Safari 9. Then stopped working properly starting from macOS Sierra + Safari 10. Also the W3C examples linked in the Trac ticket didn't work.

Testing both in Gutenberg (e.g. slash inserter, @ mentions, Tags suggestions) and in the classic editor (Tags suggestions) seems everything works as expected in Safari 12 / VoiceOver 9.

It would be great to test again with Safari 11, to confirm it's a user agent bug. Maybe WCUS contributor day would be a good opportunity to make a call for someone who's still on Sierra 🙂

If confirmed, I'd tend to think there's no much we can do. For the future, I'd suggest to change the auto-completers to meet the ARIA 1.1 implementation, which is slightly different from the ARIA 1.0 one (links in the Trac ticket) and seemed to work better with Safari 11. Of course, we should make sure the new ARIA 1.1 implementation is supported by all the main browsers / screen readers combinations. That would require a new round of testing and I'd say it should preferably be addressed in a separate issue.

[afercia]

See related #12254

[paaljoachim]

@joedolson @kjellr
Can you recheck with the current version of WordPress and Gutenberg?
Thanks!

[paaljoachim]

I just tested on my Mac running OSX 10.15.7
WordPress 5.7 RC1
Twenty Twenty One
Gutenberg 10.1

I heard the correct voiceover and saw the correct labels.

Voiceover-Gutenberg.mp4

---

I believe this issue can be closed.

[Mamaduka]

@paaljoachim, @kjellr, should we close this issue?

[carolinan]

I tried this on Safari 16.5.2 with VoiceOver, and VoiceOver did not read out any block names.
It reads out the instructions for the slash inserter, and then it announces that you are inside a text area:
(turn the sound on if possible)

slash-inserter-voiceover-safari.mp4

It works well with Chrome and VoiceOver on macOs.

[t-hamano]

Is this problem still occurring in Safari? I'm on a Windows machine, so I can't test it in Safari, but it seems to work fine in Chrome/Firefox.

• OS: Windows 11
• Browser: Chrome 120.0.6099.109, Firefox 120.0.1
• Screen reader: NVDA 2023.2.0.3096

0fdefdbda2c5463e457be703e045510b.mp4

[talldan]

Is this problem still occurring in Safari?

It's better, the items are announced, but it doesn't announce the currently selected item when you first type a letter or as you continue typing 🤔

It looks like #54902 fixed some issues related to this, and that it stopped working was down to Safari being buggy.