Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

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

Open
Splaktar opened this issue Aug 7, 2019 · 3 comments
Assignees
Labels
a11y This issue is related to accessibility needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community os: Android The issue is specific to the Android OS. P2: required Issues that must be fixed. type: bug
Milestone

Comments

@Splaktar
Copy link
Member

Splaktar commented Aug 7, 2019

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 Splaktar changed the title select: options in multiple selection cannot be selected (checked) when using TalkBack select: options in multiple selection cannot be selected when using TalkBack Aug 7, 2019
@Splaktar Splaktar added a11y This issue is related to accessibility os: Android The issue is specific to the Android OS. labels Aug 7, 2019
@Splaktar Splaktar self-assigned this Aug 7, 2019
@Splaktar Splaktar added this to the 1.1.21 milestone Aug 7, 2019
@Splaktar Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community type: bug labels Aug 7, 2019
@Splaktar
Copy link
Member Author

Splaktar commented Aug 7, 2019

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

@Splaktar Splaktar added the P2: required Issues that must be fixed. label Aug 7, 2019
@Splaktar
Copy link
Member Author

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
Copy link
Member Author

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.

@Splaktar Splaktar modified the milestones: 1.1.21, 1.1.22 Aug 15, 2019
@Splaktar Splaktar modified the milestones: 1.1.22, 1.1.23 Oct 22, 2019
@Splaktar Splaktar modified the milestones: 1.1.23, 1.2.0 Jun 8, 2020
@Splaktar Splaktar modified the milestones: 1.2.0, 1.2.1 Jul 29, 2020
@Splaktar Splaktar modified the milestones: 1.2.1, 1.2.2 Sep 14, 2020
@Splaktar Splaktar modified the milestones: 1.2.2, - Backlog Dec 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community os: Android The issue is specific to the Android OS. P2: required Issues that must be fixed. type: bug
Projects
None yet
Development

No branches or pull requests

1 participant