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