[Toast|Dialog] Improve screen reader experience for Toasts and Toasts within Dialogs

.changeset/seven-oranges-fetch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated the Toast component to support multiple re-renders being announced on screen readers

polaris-react/src/components/Frame/Frame.tsx

@@ -263,6 +263,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       logo,
       showToast: this.showToast,
       hideToast: this.hideToast,
+      toastMessages,
       startLoading: this.startLoading,
       stopLoading: this.stopLoading,
       setContextualSaveBar: this.setContextualSaveBar,

polaris-react/src/components/Frame/components/Toast/Toast.tsx

@@ -87,7 +87,7 @@ export function Toast({
   const className = classNames(styles.Toast, error && styles.error);
 
   return (
-    <div className={className}>
+    <div className={className} aria-live="assertive">
       <KeypressListener keyCode={Key.Escape} handler={onDismiss} />
       {leadingIconMarkup}
       <HorizontalStack gap="4" blockAlign="center">

polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -61,7 +61,7 @@ export const ToastManager = memo(function ToastManager({
   });
 
   return (
-    <Portal>
+    <Portal idPrefix="toast">
       <EventListener event="resize" handler={updateToasts} />
       <div className={styles.ToastManager} aria-live="assertive">
         <TransitionGroup component={null}>{toastsMarkup}</TransitionGroup>