From 7433e9128c674f785650dc5f55a9db71f6fa86d8 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@shopify.com>
Date: Tue, 23 Jul 2019 10:37:44 -0400
Subject: [PATCH] Moving aria-live to containing div

---
 UNRELEASED.md                                     |  1 +
 .../components/ToastManager/ToastManager.tsx      |  4 ++--
 .../ToastManager/tests/ToastManager.test.tsx      | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index e3db8c795c4..f4d9542e038 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -16,6 +16,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Fixed accessibility issue with ChoiceList errors not being correctly connected to the inputs ([#1824](https://github.com/Shopify/polaris-react/pull/1824));
 - Fixed `Tab` `aria-controls` pointing to a non-existent `Panel` `id` ([#1869](https://github.com/Shopify/polaris-react/pull/1869))
+- Fixed `Toast` accessibility issue by moving `aria-live` prop to `ToastManager` ([#1873](https://github.com/Shopify/polaris-react/pull/1873))
 
 ### Documentation
 
diff --git a/src/components/Frame/components/ToastManager/ToastManager.tsx b/src/components/Frame/components/ToastManager/ToastManager.tsx
index c220f160a13..5cff9160afd 100644
--- a/src/components/Frame/components/ToastManager/ToastManager.tsx
+++ b/src/components/Frame/components/ToastManager/ToastManager.tsx
@@ -31,7 +31,7 @@ export default class ToastManager extends React.PureComponent<Props, never> {
           timeout={{enter: 0, exit: 400}}
           classNames={toastClasses}
         >
-          <div ref={this.toastNodes[index]} aria-live="polite">
+          <div ref={this.toastNodes[index]}>
             <Toast {...toast} />
           </div>
         </CSSTransition>
@@ -41,7 +41,7 @@ export default class ToastManager extends React.PureComponent<Props, never> {
     return (
       <Portal idPrefix="toast-manager">
         <EventListener event="resize" handler={this.updateToasts} />
-        <div className={styles.ToastManager}>
+        <div className={styles.ToastManager} aria-live="polite">
           <TransitionGroup component={null}>{toastsMarkup}</TransitionGroup>
         </div>
       </Portal>
diff --git a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
index 8dfdc49604a..7b20695f7ea 100644
--- a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
+++ b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
@@ -29,6 +29,21 @@ describe('<ToastManager />', () => {
       });
     }).not.toThrow();
   });
+
+  it('has and aria-live attribute of polite', () => {
+    const toastManager = mountWithAppProvider(
+      <ToastManager
+        toastMessages={[{id: '1', content: 'Hello', onDismiss: noop}]}
+      />,
+    );
+
+    expect(
+      toastManager
+        .find('div')
+        .at(0)
+        .prop('aria-live'),
+    ).toBe('polite');
+  });
 });
 
 describe('<Toast />', () => {