fix(material/snack-bar): flaky screen reader announcements for NVDA/JAWS by haywoodsloan · Pull Request #20487 · angular/components

haywoodsloan · 2020-09-02T23:51:45Z

Fixes a bug where NVDA won't announce polite snack bars and JAWS won't announce any.
This is because the live region (snack-bar-container) was added to the DOM, marked as a live
region, and content was added to it in the same operation. Some screen readers require the live
region to be added to the DOM, some time to pass, then content can be added. Now the snack bar
content is added to an aria-hidden div then, 150ms later, moved to a div with aria-live defined.
This won't cause any visual changes and keeps the snack bar content available immediatly after
opening. Also, no longer using the alert or status roles. Instead just using aria-live as testing
showed that NVDA will double announce with the alert role and JAWS won't announce any button text.

BREAKING CHANGE: matSnackBarHarness.getRole() replaced with .getAriaLive() due to using aria-live
rather than the alert and status roles.

crisbeto

My understanding is that this will only be a problem for snack bars that don't have an announcementMessage. What if, instead of setting a role on the container, we announced the textContent of the container with the LiveAnnouncer, when an announcementMessage isn't specified? The advantage would be that we won't have to add the extra timeout and we'll avoid having to move DOM nodes around.

haywoodsloan · 2020-09-09T18:05:17Z

I had previously considered an approach like you describe, using textContent and LiveAnnouncer. There were a couple of concerns that dissuaded me though:

Screen readers will announce more than just the text content of a live region, this includes things like aria-label, aria-describedby, aria-disabled, aria-expanded, etc. Each screen reader has a slightly different language it uses to describe these attributes so matching what a users typically expects to hear from their screen reader isn't possible.
Updates to the user's snack bar content after the initial announcement wouldn't automatically be announced. Could be a scenario where they open a snack bar from a custom component which changes content based on some external event.
If the real content of snack bar appears late enough after the entrance animation ends, could capture the wrong text content and announce nothing. E.g. open a snack bar from a custom component that defer loads it's content.

Maybe a MutationObserver could address 2+3, but not 1. Given that and the extra complexity to filter mutation events to only announce changes a screen reader would for a normal live region, I think the DOM manipulation is cleaner solution.

jelbourn · 2020-09-15T20:23:53Z

+      // If an element in the snack bar content is focused before being moved
+      // track it and restore focus after moving to the live region.
+      let previouslyFocusedEle: HTMLElement | null = null;
+      if (this._platform.isBrowser &&


Are the isBrowser check and the instanceof HTMLElement strictly necessary?

The instanceof HTMLElement check is because document.activeElement is type Element which doesn't implement focus. So I check to make sure the active element is of type HTMLElement and therefore focusable.

I found without including the isBrowser check I would get some view_engine test failures related to document not existing. For mdc-snack-bar with the switch back to using setTimeout the call to _screenReaderAnnounce is already nested in a isBrowser check, so I've removed the redundant one. For snack-bar I've kept the check because it isn't done elsewhere in the component.

Here's an example test failure: https://app.circleci.com/pipelines/github/angular/components/13171/workflows/d5670bcf-b85d-4721-8372-86b96b5f872f/jobs/187667/parallel-runs/0/steps/0-107

jelbourn

Overall looks good, just one last comment about the extra change detection cycle from setTimeout

jelbourn

LGTM

Caretaker note: let me know if this results in a lot of failures

Fixes a bug where NVDA won't announce polite snack bars and JAWS won't announce any. This is because the live region (snack-bar-container) was added to the DOM, marked as a live region, and content was added to it in the same operation. Some screen readers require the live region to be added to the DOM, some time to pass, then content can be added. Now the snack bar content is added to an aria-hidden div then, 150ms later, moved to a div with aria-live defined. This won't cause any visual changes and keeps the snack bar content available immediatly after opening. Also, no longer using the alert or status roles. Instead just using aria-live as testing showed that NVDA will double announce with the alert role and JAWS won't announce any button text. BREAKING CHANGE: matSnackBarHarness.getRole() replaced with .getAriaLive() due to using aria-live rather than the alert and status roles.

…AWS (angular#20487) Fixes a bug where NVDA won't announce polite snack bars and JAWS won't announce any. This is because the live region (snack-bar-container) was added to the DOM, marked as a live region, and content was added to it in the same operation. Some screen readers require the live region to be added to the DOM, some time to pass, then content can be added. Now the snack bar content is added to an aria-hidden div then, 150ms later, moved to a div with aria-live defined. This won't cause any visual changes and keeps the snack bar content available immediatly after opening. Also, no longer using the alert or status roles. Instead just using aria-live as testing showed that NVDA will double announce with the alert role and JAWS won't announce any button text. BREAKING CHANGE: matSnackBarHarness.getRole() replaced with .getAriaLive() due to using aria-live rather than the alert and status roles.

angular-automatic-lock-bot · 2020-10-24T00:12:29Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

haywoodsloan requested review from andrewseguin, crisbeto and jelbourn as code owners September 2, 2020 23:51

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 2, 2020

crisbeto reviewed Sep 3, 2020

View reviewed changes

Comment thread src/material-experimental/mdc-snack-bar/snack-bar-container.ts Outdated

Comment thread src/material-experimental/mdc-snack-bar/snack-bar-container.ts Outdated

Comment thread src/material-experimental/mdc-snack-bar/testing/snack-bar-harness.ts

haywoodsloan force-pushed the snack-bar-a11y branch from 6c2c961 to 3929ef1 Compare September 9, 2020 17:47

haywoodsloan force-pushed the snack-bar-a11y branch from 3929ef1 to c47ba0d Compare September 9, 2020 18:07

haywoodsloan requested a review from crisbeto September 10, 2020 17:05

haywoodsloan force-pushed the snack-bar-a11y branch from c47ba0d to 01372a2 Compare September 11, 2020 21:12

haywoodsloan requested a review from a team September 11, 2020 21:12

jelbourn added Accessibility This issue is related to accessibility (a11y) G This is is related to a Google internal issue labels Sep 15, 2020

jelbourn reviewed Sep 15, 2020

View reviewed changes

haywoodsloan force-pushed the snack-bar-a11y branch 2 times, most recently from f70b92b to f3cdd40 Compare September 17, 2020 21:03

haywoodsloan requested review from jelbourn and removed request for a team September 17, 2020 22:42

jelbourn reviewed Sep 17, 2020

View reviewed changes

Comment thread src/material-experimental/mdc-snack-bar/snack-bar-container.ts Outdated

jelbourn added the target: major This PR is targeted for the next major release label Sep 17, 2020

haywoodsloan force-pushed the snack-bar-a11y branch from f3cdd40 to 4dd51ed Compare September 18, 2020 21:16

haywoodsloan requested a review from jelbourn September 18, 2020 21:19

haywoodsloan force-pushed the snack-bar-a11y branch 3 times, most recently from b12cd20 to 0628e6d Compare September 21, 2020 21:55

jelbourn approved these changes Sep 21, 2020

View reviewed changes

jelbourn added action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Sep 21, 2020

haywoodsloan force-pushed the snack-bar-a11y branch from 0628e6d to 320b2c9 Compare September 23, 2020 18:04

annieyw merged commit cf8e8ee into angular:master Sep 23, 2020

haywoodsloan deleted the snack-bar-a11y branch September 23, 2020 21:53

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Oct 24, 2020

Uh oh!

Conversation

haywoodsloan commented Sep 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

haywoodsloan commented Sep 9, 2020

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jelbourn Sep 15, 2020

Choose a reason for hiding this comment

Uh oh!

haywoodsloan Sep 17, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot Bot commented Oct 24, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

haywoodsloan commented Sep 2, 2020 •

edited

Loading