From a7c341b70803fe836acf12566c26b02dcf133da6 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Fri, 4 May 2018 19:36:48 -0700
Subject: [PATCH] Accessibility/toasts (#780)

Make toasts accessibile
---
 CHANGELOG.md                                  |  1 +
 .../global_toast_list.test.js.snap            | 14 ++++++
 .../toast/__snapshots__/toast.test.js.snap    | 49 +++++++++++++++++++
 src/components/toast/toast.js                 |  9 +++-
 4 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8358108a9c2..51dc1042ec4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 **Bug fixes**
 
+- Added aria-live labeling for `EuiToasts` ([#777](https://github.com/elastic/eui/pull/777))
 - Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777))
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
diff --git a/src/components/toast/__snapshots__/global_toast_list.test.js.snap b/src/components/toast/__snapshots__/global_toast_list.test.js.snap
index 5a21bff1824..f161e159e81 100644
--- a/src/components/toast/__snapshots__/global_toast_list.test.js.snap
+++ b/src/components/toast/__snapshots__/global_toast_list.test.js.snap
@@ -13,11 +13,18 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
   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"
     >
       <svg
@@ -79,11 +86,18 @@ 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"
     >
       <svg
diff --git a/src/components/toast/__snapshots__/toast.test.js.snap b/src/components/toast/__snapshots__/toast.test.js.snap
index 005a3cd1957..c4a851d34a8 100644
--- a/src/components/toast/__snapshots__/toast.test.js.snap
+++ b/src/components/toast/__snapshots__/toast.test.js.snap
@@ -2,9 +2,16 @@
 
 exports[`EuiToast Props color danger is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast euiToast--danger"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <span
@@ -16,9 +23,16 @@ exports[`EuiToast Props color danger is rendered 1`] = `
 
 exports[`EuiToast Props color primary is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast euiToast--primary"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <span
@@ -30,9 +44,16 @@ exports[`EuiToast Props color primary is rendered 1`] = `
 
 exports[`EuiToast Props color success is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast euiToast--success"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <span
@@ -44,9 +65,16 @@ exports[`EuiToast Props color success is rendered 1`] = `
 
 exports[`EuiToast Props color warning is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast euiToast--warning"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <span
@@ -58,9 +86,16 @@ exports[`EuiToast Props color warning is rendered 1`] = `
 
 exports[`EuiToast Props iconType is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <EuiIcon
@@ -78,9 +113,16 @@ exports[`EuiToast Props iconType is rendered 1`] = `
 
 exports[`EuiToast Props title is rendered 1`] = `
 <div
+  aria-live="polite"
   className="euiToast"
 >
+  <EuiScreenReaderOnly>
+    <p>
+      A new notification appears
+    </p>
+  </EuiScreenReaderOnly>
   <div
+    aria-label="Notification"
     className="euiToastHeader"
   >
     <span
@@ -95,10 +137,17 @@ 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"
   >
     <span
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index 2bdf54abf04..638a77df674 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiScreenReaderOnly } from '../accessibility';
+
 import {
   ICON_TYPES,
   EuiIcon,
@@ -72,9 +74,14 @@ export const EuiToast = ({ title, color, iconType, onClose, children, className,
   return (
     <div
       className={classes}
+      aria-live="polite"
       {...rest}
     >
-      <div className={headerClasses}>
+      <EuiScreenReaderOnly>
+        <p>A new notification appears</p>
+      </EuiScreenReaderOnly>
+
+      <div className={headerClasses} aria-label="Notification">
         {headerIcon}
 
         <span className="euiToastHeader__title">