(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