Command Palette: combobox suggestions are not announced

[afercia]

Description

The Command Center implements the combobox ARIA pattern, which is basically a search input combined with a list of suggestions. There are already a few combobox implementations in the editor. This specific implementation uses the cmdk external package.

Unfortunately, right now the combobox provided by cmdk is not accessible. It misses the aria-activedescendant property. This change upstream pacocoursey/cmdk#108 should fix it but it hasn't been released yet. Hopefully, it will be released before the next WordPress release so that there will be a chance to update the package. However, the current cmdk version 0.2.0 is not accessible. As such, the Command Center isn't accessible right now and I'm a bit surprised cmdk has been picked up with no prior accessibility evaluation.

There are a few more a11y issues in the Command Center implementation but it's a bit pointless running a full audit if aria-activedescendant doesn't get fixed first.

Step-by-step reproduction instructions

• Use Safari + VoiceOver.
• Go to the Site Editor.
• Open the Command Center.
• Search for some term to get a list of suggestions.
• Use the Down and Up arrow keys to go through the list of suggestions.
• Observe that VoiceOver doesn't announce the suggestions.

Note: I haven't tested on Windows. Worth noting that for some screen readers the aria-selected=true property set on the highlighted suggestion may be enough to make the announcement work as expected, but for a full support the missing aria-activedescrendant property is required.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Important note: it appears the cmdk demo at https://cmdk.paco.me does use aria-activedescendant. I guess that demo is based on the development branch of cmdk. However, it still doesn't work, at least with Safari. The suggestions are not announced. There must be something else that breaks the expected ARIA pattern even when aria-activedescendant is fixed.

[afercia]

Ping for @alexstine 🙂

[alexstine]

@afercia Thanks for the ping but there's nothing we can do if it is upstream.

However, the current cmdk version 0.2.0 is not accessible. As such, the Command Center isn't accessible right now and I'm a bit surprised cmdk has been picked up with no prior accessibility evaluation.

This is a big problem in Gutenberg today. Really getting sick of it too be honest. We'll never make anything accessible unless people meet us half way. Not saying it happens this way every time, but it happened here.

CC: @annezazu. These are the things leads should be aware of. Command center being inaccessible from day 1.

[afercia]

@alexstine I know. What can I say... I share your frustration.

[annezazu]

@youknowriad mind digging in here to follow up on this feedback? Thank you for flagging, Alex and Andrea.

[afercia]

Reopening because this still does not work with Safari + VoiceOver. See conversation starting from #52930 (comment)

Worth noting the test instructions, or the actual testing, in the PR that closed this issue were inaccurate in the part Use Safari + VoiceOver. because it doesn't really work with Safari + VoiceOver.

[alexstine]

Sadly, I had no way to test Voiceover at the moment as my Mac is back home. I figured it would be better than nothing to land a Windows fix but that was not intentional to make Voiceover any less important.

[annezazu]

@ntsekouras pinging you back on this after your recent effort <3

[afercia]

I figured it would be better than nothing to land a Windows fix but that was not intentional to make Voiceover any less important.

A fix for Windows already covers a big part of the users and it's very welcome. @alexstine thank you for all your work and commitment ❤️

[ntsekouras]

I figured it would be better than nothing to land a Windows fix

Just to clarify that the fix was apparently for Chrome and Firefox in macOS too. The problem still remains for safari browser. I'll see if I can figure out a fix for that too.

--edit

I tried to add aria-owns and doesn't seem to work. Additionally though I tested urlInput that has these changes and I don't think it works either.. @afercia could you try the urlInput once more to see if it works for you? Thanks!

Reference from Apple dev forums.