Page MenuHomePhabricator

[M] MediaSearch dropdowns not accessible in VoiceOver
Closed, ResolvedPublic

Description

The combobox dropdown for All licenses, All file types etc are not accessible in VoiceOver for MacOS

The items identify as "menu pop-up combo boxes". "Start typing to select an item. or choose ctrl-option-space to activate the dropdown'. but neither typing, nor ctrl-option-space activate the menu. Only enter does so (keybinding I suppose).

This means that there is something wrong with he accessibility structure here. a casual look seems to imply that the list items are dynamically added to the DOM when the menu is 'opened', which explains why it doesn't work.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CBogen renamed this task from MediaSearch dropdowns not accessible in VoiceOver to [M] MediaSearch dropdowns not accessible in VoiceOver.Jun 30 2021, 4:24 PM

I have tried to replicate the following bug with my available device NVDA windows and The Voice feature of android phone (Pixel 5) and box work and share information correctly.

The problem really seem to be related only to VoiceOver and unfortuantely I am not able to get this task as I do not have a MacOs device (not sure if you guys have a browserstack account or something similar to support development in this cases).

https://negativespacestudios.com/articles/2021/01/20/an-accessible-custom-dropdown-menu-in-vue-js/

Good guidance on approach to take with this task but this is potentially going to be larger than I would have originally anticipated.

Seddon removed Seddon as the assignee of this task.Dec 9 2021, 2:20 PM

@egardner @AnneT with a task like this I'm wondering if its something that will be addressed by the design systems team or not. Just wanting to avoid making a bespoke solution if MediaSearch is going to have to migrate anyway to a solution that would likely solve this at some point in the future?

Change 754900 had a related patch set uploaded (by AdesojiThisDot; author: AdesojiThisDot):

[mediawiki/extensions/MediaSearch@master] MediaSearch dropdowns not accessible in VoiceOver

https://gerrit.wikimedia.org/r/754900

@Seddon This is definitely something we'll want to cover in the version of dropdown in the shared Vue library, which will be included in the initial release. I'll open a task on the Codex board to make sure we test our new Select component in VoiceOver.

If it's just an issue of not rendering the menu of items until the menu is expanded, changing the "v-if" directive on this line to "v-show" should fix it. "v-if" only renders the element if the statement is true, while "v-show" always renders the element but only shows it (via the CSS display property) if the statement is true. I'd recommend giving that a shot and going ahead and committing it if the fix is really that easy.

Change 754900 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] MediaSearch dropdowns not accessible in VoiceOver

https://gerrit.wikimedia.org/r/754900

I made a recording:

Its definitely improved now, but there are still some issues:

  1. (separate from this ticket really) The tab group for images/video/audio/other media is not recognized as a group. As you are switching between panels, it definitely should be, there is no communication that these are mutual exclusive options. (and also not really an explanation as to what they are for (filters))
  2. If you have an option selected in one of the dropdowns, the button no longer tells you the function of that dropdown, it only gives the selected value
  3. If you click the button, it says "expanded", but it doesn't know what was expanded. I can key up and down to select the new value, but there is no feedback from the VO assistant that i'm in a menu.. I have to select to the 'next' control to be able to 'see the menu'.

Change 766094 had a related patch set uploaded (by AdesojiThisDot; author: AdesojiThisDot):

[mediawiki/extensions/MediaSearch@master] Accessible dropdown - Group images/video/audio/other media - Add label for each select option for screen readers only - Group media filters - Allow SR know which item is selected

https://gerrit.wikimedia.org/r/766094

Change 766094 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Accessible dropdown - Group images/video/audio/other media - Add label for each select option for screen readers only - Group media filters - Allow SR know which item is selected

https://gerrit.wikimedia.org/r/766094

Etonkovidova subscribed.

Checked on commons wmf.25. Pinging @TheDJ - it'd be great if the following will be reviewed.

I made a recording:

Its definitely improved now, but there are still some issues:

  1. (separate from this ticket really) The tab group for images/video/audio/other media is not recognized as a group. As you are switching between panels, it definitely should be, there is no communication that these are mutual exclusive options. (and also not really an explanation as to what they are for (filters))

✅ The group of elements on Special:MediaSearch is recognized now by VoiceOver.

Screen Shot 2022-03-09 at 3.56.55 PM.png (1×1 px, 311 KB)
Screen Shot 2022-03-09 at 3.45.20 PM.png (1×2 px, 364 KB)
Screen Shot 2022-03-09 at 3.48.07 PM.png (1×2 px, 354 KB)
  1. If you have an option selected in one of the dropdowns, the button no longer tells you the function of that dropdown, it only gives the selected value

❌ The issue seems to be present.

Screen Shot 2022-03-09 at 4.09.31 PM.png (1×2 px, 673 KB)
  1. If you click the button, it says "expanded", but it doesn't know what was expanded. I can key up and down to select the new value, but there is no feedback from the VO assistant that i'm in a menu.. I have to select to the 'next' control to be able to 'see the menu'.

✅ The name of the filter, e.g. Community Assessments as in the screenshot below, is now present when the dorp-down expanded.

Screen Shot 2022-03-09 at 4.08.36 PM.png (1×2 px, 764 KB)