(Accessibility) NVDA/JAWS support for EuiGlobalToastList (#2055)

* Added NVDA, JAWS support for `EuiGlobalToastList`
elastic · Jun 20, 2019 · 7fe794a · 7fe794a
1 parent c745a3c
commit 7fe794a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -95,7 +95,7 @@ export const EuiToast: FunctionComponent<EuiToastProps> = ({
   }
 
   return (
-    <div className={classes} aria-live="polite" {...rest}>
+    <div className={classes} {...rest}>
       <EuiScreenReaderOnly>
         <p>
           <EuiI18n