Material: select: does not work well with VoiceOver

[jelbourn]

The component does not act as one whole form control; we may want to explore changing this from role="listbox" to "combobox" to get better results with VoiceOver specifically. Will be tricky to not mess up NVDA and JAWS at the same time.

[benjiallen]

• Component with issue
  
  
  
  • <md-select>
  
  
• Overview of the Issues
  
  
  
  • Given I am using iOS VoiceOver, and an option within <md-select> has not been selected, when I try to "swipe right" to select the element, then focus jumps from the component to the label and makes it difficult to activate the control i.e., I need to “double tap” to get focus to the select and then “double tap” again to activate the control
  
  
  • Selects do not show up in the VoiceOver rotor. Given I select "form controls" from the VoiceOver rotor, when I try to "swipe down" to select an md-select then VoiceOver will skip the md-select
  
  
• AngularJS Material Version
  
  
  
  • 1.1.5
  
  
• Browsers and Operating System
  
  
  
  • iOS 11.2.1, Safari, VoiceOver
  
  
• Reproduce the Error
  
  
  
  • Visit https://material.angularjs.org/latest/demo/select and interact with the select menu with VoiceOver
  
  

[benjiallen]

Adding more issues with VoiceOver and md-select

• What is the issue? *
  
  
  
  • In iOS VoiceOver, once an md-select with multiple selections is expanded, there is no way to collapse the list nor navigate to elements beyond the last option in the expanded option list. "Swiping right" past the last item in the md-select takes you outside of the viewport and into the browser chrome i.e., focus is moved to the back button
  
  
• What is the expected behavior?
  
  
  
  • There should be a method for closing the select menu once the user has made a selection
  
  
  • After you reach the end of the list "swiping right" should move focus to the top of the list
  
  
• CodePen (or steps to reproduce the issue): *
  
  
  
  • https://material.angularjs.org/latest/demo/select#option-groups
  
  
  • Details: Using iOS VoiceOver. Open the select menu for "topping", make a selection and then try to close the form control or move to the next form control on the page using the "swipe right" gesture.
  
  
• AngularJS Versions: *
  
  
  
  • AngularJS Version: 1.5.5
  
  
  • AngularJS Material Version: 1.1.5
  
  
• Additional Information:
  
  
  
  • Browser Type: * Safari and VoiceOver
  
  
  • Browser Version: * Latest that comes with iOS
  
  
  • OS: * iOS 11.2.1
  
  
  • Stack Traces: N/A
  
  

[kammokiran]

@jelbourn @Splaktar
We are testing an app on iphone with iOS version 12. Voiceover doesn't recognise the angular material UI select box. Is there a temporary fix for this please?

[Splaktar]

I just finished up a big PR for improving screen reader support for autocomplete. That should get autocomplete in good a11y shape. Prior to that, we did a lot of work to improve chips a11y.

Next up is this issue and the rest of the select a11y work.

[Splaktar]

Combobox

The Legacy ARIA 1.0 Combobox without Autocomplete is close to what we want, but it requires an input.

Looking further at the basic Combobox description we can see the following requirement

a single-line textbox

Neither AngularJS Material or Angular Material use a textbox (i.e. input) with their selects.

In the Material Design spec (2017), there is no specific specification for a "Select" component. It falls under the behaviors defined for Menus. These behaviors do not provide for text input via a textbox or input. They also do not provide for a multiple select behavior.

This also appears to be true for the Material Design spec (2018+) which covers these behaviors under their Menus component as well.

Historical discussions of Listbox vs Combobox for md-select

• https://github.com/angular/material/issues/3859
• https://github.com/angular/material/issues/4977#issuecomment-160715723

[Splaktar]

Listbox

MDC seems closest to the recommendations that I can find for a Material Design component. Their select uses role="button" and aria-haspopup="listbox".

This pattern is aligned with the WAI-ARIA Collapsible Dropdown Listbox Example except that the MDC ul does not have the role="listbox" attribute.

It's unclear whether this pattern can be adapted to work with multiple selection as there is no associated spec that covers that. It seems like we should consider keeping multiple select as a completely distinct component from select in future component libraries.

[Splaktar]

After some significant investigation, it doesn't appear that the WAI-ARIA Collapsible Dropdown Listbox pattern is well supported across screen readers (especially VoiceOver and NVDA).

I'm currently exploring other patterns and options.

[Splaktar]

After experimenting with and testing a number of approaches, I've pushed a big update to PR https://github.com/angular/material/pull/11761 that provides a refined version of the WAI-ARIA Collapsible Dropdown Listbox pattern. It seems to be working considerably better in VoiceOver on macOS and testing on other platforms/screen readers is in progress.

More testing, review, and feedback is needed. There are also some known issues listed in the PR under TODO.

Single Selection

I believe that the selection issues mentioned in https://github.com/angular/material/issues/10967#issuecomment-354295026 should be addressed. I haven't yet tested with the VoiceOver rotor.

Multiple Selection

As far as escaping a multiple selection pop-up panel mentioned in https://github.com/angular/material/issues/10967#issuecomment-356022949, even on desktop it's not straightforward to get out of a multiple selection pop-up panel. You need to either tab out or use the Escape key to exit with the keyboard. With the mouse, you can click the backdrop. It would be nice if there was some guidance for working with multiple selection drop downs like this in the Material Design spec, but as far as I can tell, there is not. This sounds like a topic to raise with @jelbourn for consultation with the UX team as this also affects Angular Material.