select: options in multiple selection cannot be selected when using TalkBack #11770
Description
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:
- Enable TalkBack screen reader
- Open site in Chrome
- Go to the Options Group demo
- Open the multiple select for Toppings
- Make sure an option is focused (swipe right/left)
- 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.
Activity
[-]select: options in multiple selection cannot be selected (checked) when using TalkBack[/-][+]select: options in multiple selection cannot be selected when using TalkBack[/+]Splaktar commentedon Aug 7, 2019
This could be related to the infinite recursion issues with gestures in #11768.
Splaktar commentedon Aug 13, 2019
Following these reproduction steps does indeed trigger #11768, however that issue doesn't block the
clickevent from being handled properly. So it does not appear to be causing the behavior here where the checkbox isn't checked.Splaktar commentedon Aug 13, 2019
When opening the options panel, this exception is thrown:
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.