WIP: [Accessibility] Make toast global list is an aria live region

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added ability to update `EuiInMemoryTable` `sorting` prop and remove columns after sorting is applied ([#1972](https://github.com/elastic/eui/pull/1972))
 - Added `onToggle` callback to `EuiAccordion` ([#1974](https://github.com/elastic/eui/pull/1974))
 - Removed `options` `defaultProps` value from `EuiSuperSelect` ([#1975](https://github.com/elastic/eui/pull/1975))
+- Added a logger based on `Aria Live Region` to `EuiGlobalToastList` ([#1958](https://github.com/elastic/eui/pull/1958))
 
 **Bug fixes**
 

src/components/toast/__snapshots__/global_toast_list.test.js.snap

@@ -5,24 +5,24 @@ exports[`EuiGlobalToastList is rendered 1`] = `
   aria-label="aria-label"
   class="euiGlobalToastList testClass1 testClass2"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    aria-live="polite"
+    class="euiScreenReaderOnly"
+    role="region"
+  />
+</div>
 `;
 
 exports[`EuiGlobalToastList props toasts is rendered 1`] = `
 <div
   class="euiGlobalToastList"
 >
   <div
-    aria-live="polite"
     class="euiToast euiToast--success euiGlobalToastListItem"
     data-test-subj="a"
     id="a"
   >
-    <p
-      class="euiScreenReaderOnly"
-    >
-      A new notification appears
-    </p>
     <div
       aria-label="Notification"
       class="euiToastHeader euiToastHeader--withBody"
@@ -66,16 +66,10 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
     </div>
   </div>
   <div
-    aria-live="polite"
     class="euiToast euiToast--danger euiGlobalToastListItem"
     data-test-subj="b"
     id="b"
   >
-    <p
-      class="euiScreenReaderOnly"
-    >
-      A new notification appears
-    </p>
     <div
       aria-label="Notification"
       class="euiToastHeader euiToastHeader--withBody"
@@ -118,5 +112,25 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       b
     </div>
   </div>
+  <div
+    aria-live="polite"
+    class="euiScreenReaderOnly"
+    role="region"
+  >
+    <p>
+      A new notification appears
+    </p>
+    <p>
+      A
+    </p>
+    a
+    <p>
+      A new notification appears
+    </p>
+    <p>
+      B
+    </p>
+    b
+  </div>
 </div>
 `;

src/components/toast/__snapshots__/toast.test.js.snap

@@ -5,21 +5,8 @@ exports[`EuiToast Props color danger is rendered 1`] = `
   color="danger"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--danger"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -43,21 +30,8 @@ exports[`EuiToast Props color primary is rendered 1`] = `
   color="primary"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--primary"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -81,21 +55,8 @@ exports[`EuiToast Props color success is rendered 1`] = `
   color="success"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--success"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -119,21 +80,8 @@ exports[`EuiToast Props color warning is rendered 1`] = `
   color="warning"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--warning"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -157,21 +105,8 @@ exports[`EuiToast Props iconType is rendered 1`] = `
   iconType="user"
 >
   <div
-    aria-live="polite"
     className="euiToast"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -219,21 +154,8 @@ exports[`EuiToast Props title is rendered 1`] = `
   title="toast title"
 >
   <div
-    aria-live="polite"
     className="euiToast"
   >
-    <EuiScreenReaderOnly>
-      <p
-        className="euiScreenReaderOnly"
-      >
-        <EuiI18n
-          default="A new notification appears"
-          token="euiToast.newNotification"
-        >
-          A new notification appears
-        </EuiI18n>
-      </p>
-    </EuiScreenReaderOnly>
     <EuiI18n
       default="Notification"
       token="euiToast.notification"
@@ -257,15 +179,9 @@ exports[`EuiToast Props title is rendered 1`] = `
 exports[`EuiToast is rendered 1`] = `
 <div
   aria-label="aria-label"
-  aria-live="polite"
   class="euiToast testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <p
-    class="euiScreenReaderOnly"
-  >
-    A new notification appears
-  </p>
   <div
     aria-label="Notification"
     class="euiToastHeader euiToastHeader--withBody"

src/components/toast/global_toast_list.js

@@ -1,11 +1,13 @@
-import React, { Component } from 'react';
+import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Timer } from '../../services/time';
 import { IconPropType } from '../icon';
 import { EuiGlobalToastListItem } from './global_toast_list_item';
 import { EuiToast } from './toast';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiI18n } from '../i18n';
 
 export const TOAST_FADE_OUT_MS = 250;
 
@@ -27,6 +29,9 @@ export class EuiGlobalToastList extends Component {
     // for information on initial value of 0
     this.isScrollingAnimationFrame = 0;
     this.startScrollingAnimationFrame = 0;
+
+    this.renderedForScreenReaderToasts = [];
+    this.clearScreenReaderToastStorageID = null;
   }
 
   static propTypes = {
@@ -172,6 +177,56 @@ export class EuiGlobalToastList extends Component {
     });
   };
 
+  clearScreenReaderToastStorage = () => {
+    this.renderedForScreenReaderToasts = [];
+    this.forceUpdate();
+  };
+
+  getRenderedForScreenReaderToasts = () => {
+    return this.renderedForScreenReaderToasts.map(toast => toast.reactElement);
+  };
+
+  filterNewOnlyToasts = toasts => {
+    return toasts.filter(toastFromProp => {
+      const withTheSameID = this.renderedForScreenReaderToasts.filter(
+        existToast => existToast.id === toastFromProp.id
+      );
+      return !withTheSameID.length;
+    });
+  };
+
+  logSetOfToasts = toasts => {
+    // map and filter incoming toasts to get only new ones
+    const newToasts = this.filterNewOnlyToasts(toasts).map(newToast => ({
+      id: newToast.id,
+      reactElement: (
+        <Fragment key={newToast.id}>
+          <p>
+            <EuiI18n
+              token="euiGlobalToastList.newNotification"
+              default="A new notification appears"
+            />
+          </p>
+          <p>{newToast.title}</p>
+          {newToast.text}
+        </Fragment>
+      ),
+    })); // returns element, if element is false, then it excludes the one
+
+    // add new incoming toasts to the stack
+    this.renderedForScreenReaderToasts.push(...newToasts);
+    // skip previous stack clearing
+    clearTimeout(this.clearScreenReaderToastStorageID);
+    // Set it to wait 57 seconds after the last notification before clear the stack
+    // 27s is the time chosen approx. That time is that Screen Reader needs to finish reading
+    // at least the last one notifications.
+    // It strictly depends on how long that notifications is.
+    this.clearScreenReaderToastStorageID = setTimeout(
+      this.clearScreenReaderToastStorage,
+      57000
+    );
+  };
+
   componentDidMount() {
     this.listElement.addEventListener('scroll', this.onScroll);
     this.listElement.addEventListener('mouseenter', this.onMouseEnter);
@@ -221,6 +276,8 @@ export class EuiGlobalToastList extends Component {
       ...rest
     } = this.props;
 
+    this.logSetOfToasts(toasts);
+
     const renderedToasts = toasts.map(toast => {
       const {
         text,
@@ -253,6 +310,11 @@ export class EuiGlobalToastList extends Component {
         className={classes}
         {...rest}>
         {renderedToasts}
+        <EuiScreenReaderOnly>
+          <div role="region" aria-live="polite">
+            {this.getRenderedForScreenReaderToasts()}
+          </div>
+        </EuiScreenReaderOnly>
       </div>
     );
   }

src/components/toast/toast.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 
 import { IconPropType, EuiIcon } from '../icon';
@@ -75,16 +74,7 @@ export const EuiToast = ({
   }
 
   return (
-    <div className={classes} aria-live="polite" {...rest}>
-      <EuiScreenReaderOnly>
-        <p>
-          <EuiI18n
-            token="euiToast.newNotification"
-            default="A new notification appears"
-          />
-        </p>
-      </EuiScreenReaderOnly>
-
+    <div className={classes} {...rest}>
       <EuiI18n token="euiToast.notification" default="Notification">
         {notification => (
           <div