select: options in multiple selection cannot be selected when using TalkBack

[Splaktar]

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

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

Detailed Reproduction Steps:

1. Enable TalkBack screen reader
2. Open site in Chrome
3. Go to the Options Group demo
4. Open the multiple select for Toppings
5. Make sure an option is focused (swipe right/left)
6. Double tap to select (check) the focused option

What is the expected behavior?

The option is selected and the checkbox icon shows that it is checked. Re-selecting the option should not result in the screen reader announcing it as "not selected".

What is the current behavior?

The option is not selected and the checkbox icon shows that it is unchecked. Re-selecting the option results in the screen reader announcing it as "not selected".

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

Basic functionality for screen reader users on Android.

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

• AngularJS: 1.7.8
• AngularJS Material: 1.1.19
• OS: Android 9
• Browsers: Chrome for Android

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

Discovered this while doing a11y testing for PR #11761.

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 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.

[Splaktar]

This could be related to the infinite recursion issues with gestures in #11768.

[Splaktar]

Following these reproduction steps does indeed trigger #11768, however that issue doesn't block the click event from being handled properly. So it does not appear to be causing the behavior here where the checkbox isn't checked.

[Splaktar]

When opening the options panel, this exception is thrown:

angular.js:15567 Possibly unhandled rejection: {see extracted object}
(anonymous) @ angular.js:15567
(anonymous) @ angular.js:11846
processChecks @ angular.js:17977
$digest @ angular.js:19112
(anonymous) @ angular.js:19432
completeTask @ angular.js:21231
(anonymous) @ angular.js:6812
setTimeout (async)
Browser.self.defer @ angular.js:6810
$evalAsync @ angular.js:19430
(anonymous) @ angular.js:17817
scheduleProcessQueue @ angular.js:17993
$$resolve @ angular.js:18020
resolvePromise @ angular.js:18004
resolveFn @ angular.js:18239
(anonymous) @ angular.js:6359
(anonymous) @ angular.js:6418
forEach @ angular.js:387
_resolve @ angular.js:6417
(anonymous) @ angular.js:6410
(anonymous) @ angular.js:6264
AnimateRunner._tick @ angular.js:6330
complete @ angular.js:6409
close @ angular-animate.js:1259
onAnimationProgress @ angular-animate.js:1321
defaultHandlerWrapper @ angular.js:3824
eventHandler @ angular.js:3812

The extracted object is:

{
  "options": {
    "preserveScope": true,
    "scope": "$SCOPE",
    "parent": {
      "0": {
        "ng339": 5
      },
      "length": 1
    },
    "themable": true,
    "hasBackdrop": true,
    "disableParentScroll": true,
    "skipCompile": true,
    "element": {
      "0": {},
      "length": 1
    },
    "target": {
      "0": {
        "ng339": 886
      },
      "length": 1
    },
    "selectCtrl": {},
    "preserveElement": true,
    "loadingAsync": false,
    "isRemoved": true,
    "selectEl": {
      "0": {
        "ng339": 887
      },
      "length": 1
    },
    "contentEl": {
      "0": {
        "ng339": 888
      },
      "length": 1
    },
    "optionNodes": {
      "0": {
        "ng339": 897,
        "value": "Pepperoni"
      },
      "1": {
        "ng339": 899,
        "value": "Sausage"
      },
      "2": {
        "ng339": 901,
        "value": "Ground Beef"
      },
      "3": {
        "ng339": 903,
        "value": "Bacon"
      },
      "4": {
        "ng339": 905,
        "value": "Mushrooms"
      },
      "5": {
        "ng339": 907,
        "value": "Onion"
      },
      "6": {
        "ng339": 909,
        "value": "Green Pepper"
      },
      "7": {
        "ng339": 911,
        "value": "Green Olives"
      }
    },
    "backdrop": {
      "0": {},
      "length": 1
    },
    "focusedNode": "...",
    "alreadyOpen": true
  },
  "deferred": {
    "promise": {}
  }
}

However, this happens for all select options pop-ups when TalkBack is enabled (and often on macOS with VoiceOver enabled). It doesn't seem to be directly related to checkboxes not being checked when using TalkBack.