WIP: Fix double-announce in IE11+JAWS

material-components · Nov 16, 2018 · 6f34f18 · 6f34f18
1 parent b4b19b7
commit 6f34f18
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 46 deletions.
diff --git a/packages/mdc-snackbar/index.js b/packages/mdc-snackbar/index.js
@@ -101,7 +101,7 @@ class MDCSnackbar extends MDCComponent {
     return new MDCSnackbarFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
-      announce: () => announce(this.root_, this.labelEl_),
+      announce: () => announce(this.labelEl_),
       notifyOpening: () => this.emit(OPENING_EVENT, {}),
       notifyOpened: () => this.emit(OPENED_EVENT, {}),
       notifyClosing: (reason) => this.emit(CLOSING_EVENT, reason ? {reason} : {}),

diff --git a/packages/mdc-snackbar/util.js b/packages/mdc-snackbar/util.js
@@ -26,15 +26,19 @@ import {numbers, strings} from './constants';
 const {ARIA_LIVE_DELAY_MS} = numbers;
 const {ARIA_LIVE_LABEL_TEXT_ATTR} = strings;
 
-export function announce(rootEl, labelEl) {
-  const priority = rootEl.getAttribute('aria-live');
+/**
+ * @param {!HTMLElement} ariaEl
+ * @param {!HTMLElement=} labelEl
+ */
+export function announce(ariaEl, labelEl = ariaEl) {
+  const priority = ariaEl.getAttribute('aria-live');
   const labelText = labelEl.textContent.trim(); // Ignore `&nbsp;` (see below)
   if (!labelText) {
     return;
   }
 
   // Temporarily disable `aria-live` to prevent JAWS+Firefox from announcing the message twice.
-  rootEl.setAttribute('aria-live', 'off');
+  ariaEl.setAttribute('aria-live', 'off');
 
   // Temporarily clear `textContent` to force a DOM mutation event that will be detected by screen readers.
   // `aria-live` elements are only announced when the element's `textContent` *changes*, so snackbars
@@ -71,10 +75,9 @@ export function announce(rootEl, labelEl) {
   // however, `aria-live` is turned off, so this DOM update will be ignored by screen readers.
   labelEl.setAttribute(ARIA_LIVE_LABEL_TEXT_ATTR, labelText);
 
-  // TODO(acdvorak): Experiment with nested setTimeout() calls to see if we can avoid ARIA_LIVE_DELAY_MS.
   setTimeout(() => {
     // Allow screen readers to announce changes to the DOM again.
-    rootEl.setAttribute('aria-live', priority);
+    ariaEl.setAttribute('aria-live', priority);
 
     // Remove the message from the ::before pseudo-element.
     labelEl.removeAttribute(ARIA_LIVE_LABEL_TEXT_ATTR);

diff --git a/test/screenshot/spec/mdc-snackbar/classes/baseline-with-action.html b/test/screenshot/spec/mdc-snackbar/classes/baseline-with-action.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar--with-action" autofocus>Open snackbar with action</button>
 
       <div class="mdc-snackbar mdc-snackbar--open"
-           id="test-snackbar--with-action"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar--with-action">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/classes/leading.html b/test/screenshot/spec/mdc-snackbar/classes/leading.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar--leading" autofocus>Open leading snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--leading mdc-snackbar--open"
-           id="test-snackbar--leading"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar--leading">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Your photo has been archived.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Your photo has been archived.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Undo</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/classes/stacked.html b/test/screenshot/spec/mdc-snackbar/classes/stacked.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar--stacked" autofocus>Open stacked snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--stacked mdc-snackbar--open"
-           id="test-snackbar--stacked"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar--stacked">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">This item already has the label "travel". You can add a new label.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">This item already has the label "travel". You can add a new label.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Add a new label</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/elevation.html b/test/screenshot/spec/mdc-snackbar/mixins/elevation.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom elevation snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--elevation"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/fill-color.html b/test/screenshot/spec/mdc-snackbar/mixins/fill-color.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom fill-color snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--fill-color"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/label-ink-color.html b/test/screenshot/spec/mdc-snackbar/mixins/label-ink-color.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom label-ink-color snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--label-ink-color"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/max-width.html b/test/screenshot/spec/mdc-snackbar/mixins/max-width.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom max-width snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--max-width"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/min-width.html b/test/screenshot/spec/mdc-snackbar/mixins/min-width.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom min-width snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--min-width"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/shape-radius.html b/test/screenshot/spec/mdc-snackbar/mixins/shape-radius.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom shape-radius snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--shape-radius"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>

diff --git a/test/screenshot/spec/mdc-snackbar/mixins/viewport-margin.html b/test/screenshot/spec/mdc-snackbar/mixins/viewport-margin.html
@@ -47,11 +47,11 @@
       <button class="test-snackbar-open-button test-font--redact-all" data-test-snackbar-id="test-snackbar" autofocus>Open custom viewport-margin snackbar</button>
 
       <div class="mdc-snackbar mdc-snackbar--open custom-snackbar--viewport-margin"
-           id="test-snackbar"
-           role="status"
-           aria-live="polite">
+           id="test-snackbar">
         <div class="mdc-snackbar__surface">
-          <div class="mdc-snackbar__label">Can't send photo. Retry in 5 seconds.</div>
+          <div class="mdc-snackbar__label"
+               role="status"
+               aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
           <div class="mdc-snackbar__actions">
             <button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
             <button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>