Accessibility/toasts (#780)

Make toasts accessibile
elastic · May 5, 2018 · a7c341b · a7c341b
1 parent 3ae48ec
commit a7c341b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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">