fix(select): overhaul screen reader support

[Splaktar]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

• md-select does not work well with VoiceOver on iOS or macOS
• When using md-select with the multiple attribute, options are always "checked" because of ngAria.

Issue Number:
Fixes #10748. Fixes #10967.

What is the new behavior?

• move to WAI-ARIA's Collapsible Dropdown Listbox practice
  • don't apply aria-required to md-select
  • as it isn't compatible with the button role
  • the md-content element is now the listbox
    • has the appropriate attributes and a unique id
    • and receives focus when the pop-up panel opens
    • aria-owns now points to this listbox so that indexes work
  • option focus is handled via aria-activedescendant
  • remove aria-expanded when collapsed
  • remove aria-disabled attribute when not disabled
• manually remove aria-checked set by ngAria due to ngValue usage
• apply md-focused class to the option with focus
• improve ng-multiple implementation
  • account for multiple attribute on md-select-menu
• remove unused deregisterCollectionWatch()
• fix overloaded variable names
• don't set aria-selected="false" on options in single selection mode
• stop labels and values from being announced multiple times
• add JSDoc/Closure Compiler details and types
• refinements for VoiceOver users
• clean up watchers, observers, and event handlers on $destroy
• fix a case where the initial selection model could contain two values
  • for the empty option, i.e. "" and "None"
  • deselection was only clearing the first one in single selection mode
• reduce duplicated code for focusing option nodes
• improve keyboard option scrolling behavior
• eliminate duplicate call to autoFocus()

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

• Deque Quick Reference Guide: VoiceOver for iOS
• Accessibility testing with Android Talkback
• VoiceOver iOS Gesture/Keyboard Commands

Completed Testing and Issues Identified

• Finalize testing on VoiceOver in Chrome
• Finalize testing on VoiceOver in Safari
• Finalize testing on NVDA
• Escape doesn't set the model back to the previous value
• User defined aria-labelledby gets overwritten
• aria-hidden on md-select-value is cleared when pop-up is closed, resulting in label being read twice when the md-select has no selection
• Test in VoiceOver for iOS on Safari
  • Test with VoiceOver rotor
    • This seems to be working well as using the swipe right/left now cycles through the options as intended.
    • It should be noted that md-select elements show up under the Buttons Rotor instead of Form Controls. This seems to be working as intended.
  • Test exiting the pop-up panel in multiple selection mode
    • 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. This is being tracked in select(multiple): bad UX for exiting pop-up panel on iOS #11791.
• Test on ChromeVoX
  • ChromeVox doesn't handle aria-lablelledby well and reads the md-select-value first and then the aria-label followed by the md-select-value again. Ideally, the label should be read and then the value. This will need to be handled in separate issue after consulting with the a11y team and possibly opening a bug against ChromeVox.
• Autocomplete options' hover styling doesn't extend fully to the left edge
• Test with TalkBack on Chrome for Android. I tested and saw similar behavior on Firefox for Android as well.
  • Single selection appears to be working well. "Checked" is no longer announced in single selection mode.
  • Multiple selection can be dismissed by a separated two finger tap.
  • Options in multiple selection cannot be selected (checked). This works for Angular Material, but not here. This isn't a regression as this has always been a problem with md-select on Android (back at least to 1.1.5). This is being tracked in select: options in multiple selection cannot be selected when using TalkBack #11770. This is likely a bug with TalkBack. Need to try to reproduce with a WAI-ARIA example and then find out where to submit the defect against TalkBack or Chrome for Android.

[mmalerba]

This has ~50 targets failing in g3, will need to look into it more when I get a chance

[Splaktar]

Rebased.

[Splaktar]

Rebased.

[jelbourn]

LGTM