From 7fe794ace8fcc0a0e8866a1849d8042a63372812 Mon Sep 17 00:00:00 2001
From: Philipp B <philipp.b@ya.ru>
Date: Thu, 20 Jun 2019 16:41:11 +0300
Subject: [PATCH] (Accessibility) NVDA/JAWS support for `EuiGlobalToastList`
 (#2055)

* Added NVDA, JAWS support for `EuiGlobalToastList`
---
 CHANGELOG.md                                               | 1 +
 .../toast/__snapshots__/global_toast_list.test.tsx.snap    | 6 ++++--
 src/components/toast/__snapshots__/toast.test.tsx.snap     | 7 -------
 src/components/toast/global_toast_list.tsx                 | 2 ++
 src/components/toast/toast.tsx                             | 2 +-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d60ef5b24a2..5c6e8d7d89c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Changed `EuiNavDrawerFlyout` title from `h5` to `div` ([#2040](https://github.com/elastic/eui/pull/2040))
+- Converted `EuiGlobalToastList` into ARIA live region by adding `role="region"` attribute to add NVDA/JAWS support ([#2055](https://github.com/elastic/eui/pull/2055))
 - Added `magnifyWithMinus` and `magnifyWithPlus` glyphs to `EuiIcon` ([2056](https://github.com/elastic/eui/pull/2056))
 - Added a fully black (no matter the theme) color SASS variable `$euiColorInk` ([2060](https://github.com/elastic/eui/pull/2060))
 
diff --git a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
index 9e229edf0a5..6b783f2bb15 100644
--- a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
+++ b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
@@ -3,17 +3,20 @@
 exports[`EuiGlobalToastList is rendered 1`] = `
 <div
   aria-label="aria-label"
+  aria-live="polite"
   class="euiGlobalToastList testClass1 testClass2"
   data-test-subj="test subject string"
+  role="region"
 />
 `;
 
 exports[`EuiGlobalToastList props toasts is rendered 1`] = `
 <div
+  aria-live="polite"
   class="euiGlobalToastList"
+  role="region"
 >
   <div
-    aria-live="polite"
     class="euiToast euiToast--success euiGlobalToastListItem"
     data-test-subj="a"
     id="a"
@@ -66,7 +69,6 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
     </div>
   </div>
   <div
-    aria-live="polite"
     class="euiToast euiToast--danger euiGlobalToastListItem"
     data-test-subj="b"
     id="b"
diff --git a/src/components/toast/__snapshots__/toast.test.tsx.snap b/src/components/toast/__snapshots__/toast.test.tsx.snap
index c1e4992390d..cd6bbe93610 100644
--- a/src/components/toast/__snapshots__/toast.test.tsx.snap
+++ b/src/components/toast/__snapshots__/toast.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`EuiToast Props color danger is rendered 1`] = `
   title="test title"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--danger"
   >
     <EuiScreenReaderOnly>
@@ -47,7 +46,6 @@ exports[`EuiToast Props color primary is rendered 1`] = `
   title="test title"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--primary"
   >
     <EuiScreenReaderOnly>
@@ -88,7 +86,6 @@ exports[`EuiToast Props color success is rendered 1`] = `
   title="test title"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--success"
   >
     <EuiScreenReaderOnly>
@@ -129,7 +126,6 @@ exports[`EuiToast Props color warning is rendered 1`] = `
   title="test title"
 >
   <div
-    aria-live="polite"
     className="euiToast euiToast--warning"
   >
     <EuiScreenReaderOnly>
@@ -170,7 +166,6 @@ exports[`EuiToast Props iconType is rendered 1`] = `
   title="test title"
 >
   <div
-    aria-live="polite"
     className="euiToast"
   >
     <EuiScreenReaderOnly>
@@ -234,7 +229,6 @@ exports[`EuiToast Props title is rendered 1`] = `
   title="toast title"
 >
   <div
-    aria-live="polite"
     className="euiToast"
   >
     <EuiScreenReaderOnly>
@@ -272,7 +266,6 @@ 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"
 >
diff --git a/src/components/toast/global_toast_list.tsx b/src/components/toast/global_toast_list.tsx
index d10c8505164..3c457e20418 100644
--- a/src/components/toast/global_toast_list.tsx
+++ b/src/components/toast/global_toast_list.tsx
@@ -253,6 +253,8 @@ export class EuiGlobalToastList extends Component<
 
     return (
       <div
+        aria-live="polite"
+        role="region"
         ref={element => {
           this.listElement = element;
         }}
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
index be2d69aeef9..e654e3d7a5b 100644
--- a/src/components/toast/toast.tsx
+++ b/src/components/toast/toast.tsx
@@ -95,7 +95,7 @@ export const EuiToast: FunctionComponent<EuiToastProps> = ({
   }
 
   return (
-    <div className={classes} aria-live="polite" {...rest}>
+    <div className={classes} {...rest}>
       <EuiScreenReaderOnly>
         <p>
           <EuiI18n