select(multiple): bad UX for exiting pop-up panel on iOS #11791
Description
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:
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 #11761, but unfortunately, it was not fixed there.
This was originally reported in #10967 (comment), 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.