select(multiple): bad UX for exiting pop-up panel on iOS

[Splaktar]

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://material.angularjs.org/latest/demo/select#option-groups

Detailed Reproduction Steps:

https://github.com/angular/material/issues/10967#issuecomment-356022949

What is the expected behavior?

It should be possible to exit/close the options pop-up panel in multiple mode after the user is done making selections via iOS VoiceOver.

What is the current behavior?

This issue with being difficult to exit a multiple selection select exists with Angular Material as well. The "Two finger scrub" to dismiss alerts/dialogs or go back a page seems to always go back a page when used with AngularJS/Angular Material Autocomplete and Select. I tried changing the md-select-menu-container to role="dialog" and adding "aria-haspopup="dialog" to the md-select, but that didn't help and the Z (two finger scrub) always went back to the previous page.

What is the use-case or motivation for changing an existing behavior?

• Touching the backdrop doesn't make much sense from a screen reader perspective like iOS VoiceOver.
• The normal gesture to close the dialog/panel/alert navigates the browser back and loses the user's progress.
• This is a common use case and pattern and the UX is very bad.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.8
• AngularJS Material: 1.1.20
• OS: iOS 12.x
• Browsers: Chrome and Safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

This was tested as part of PR https://github.com/angular/material/pull/11761, but unfortunately, it was not fixed there.

This was originally reported in https://github.com/angular/material/issues/10967#issuecomment-356022949, but it's being moved here as a separate issue as that one is going to be closed out due to fixing most of the other issues there.