[ToastManager] Move aria-live to containing div for a11y using NVDA

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
 

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>

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 />', () => {