From f17ce929ed5727a7e50e4e26469301901fbf0d69 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Mon, 4 Sep 2023 14:09:53 +0100
Subject: [PATCH 1/6] chore: ensure toasts are audible upon multiple
 appearances

---
 polaris-react/src/components/Frame/components/Toast/Toast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.tsx b/polaris-react/src/components/Frame/components/Toast/Toast.tsx
index 9f5e66884d4..c74f2a3e28c 100644
--- a/polaris-react/src/components/Frame/components/Toast/Toast.tsx
+++ b/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">

From a33aab830b83d57e7f47e5267b5ee5341175f680 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Mon, 4 Sep 2023 14:15:05 +0100
Subject: [PATCH 2/6] chore: add changeset

---
 .changeset/seven-oranges-fetch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/seven-oranges-fetch.md

diff --git a/.changeset/seven-oranges-fetch.md b/.changeset/seven-oranges-fetch.md
new file mode 100644
index 00000000000..9ef53522eaa
--- /dev/null
+++ b/.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

From 05c61b9ed04e520cf3b99e41ef7809a7646fdd8c Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 10:30:01 +0100
Subject: [PATCH 3/6] chore: render toast contents within Dialog

---
 polaris-react/src/components/Frame/Frame.tsx  |   1 +
 .../components/ToastManager/ToastManager.tsx  |   2 +-
 .../src/components/Modal/Modal.stories.tsx    | 875 +++++++++---------
 .../Modal/components/Dialog/Dialog.tsx        |  15 +
 .../PolarisTestProvider.tsx                   |   2 +
 .../src/components/Toast/Toast.stories.tsx    |  77 ++
 polaris-react/src/utilities/frame/context.ts  |   1 +
 7 files changed, 552 insertions(+), 421 deletions(-)

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
index 77fa377b742..0b70291d508 100644
--- a/polaris-react/src/components/Frame/Frame.tsx
+++ b/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,
diff --git a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx
index 6cd3f20efd6..6335de39320 100644
--- a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx
+++ b/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>
diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx
index 11f9dfee887..a5a9fdddfbf 100644
--- a/polaris-react/src/components/Modal/Modal.stories.tsx
+++ b/polaris-react/src/components/Modal/Modal.stories.tsx
@@ -12,6 +12,7 @@ import {
   Text,
   TextContainer,
   TextField,
+  Frame,
 } from '@shopify/polaris';
 
 export default {
@@ -26,31 +27,34 @@ export function Default() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -77,45 +81,47 @@ export function WithPrimaryAction() {
   const activator = <Button onClick={toggleModal}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={toggleModal}
-        title="Get a shareable link"
-        primaryAction={{
-          content: 'Close',
-          onAction: toggleModal,
-        }}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <TextContainer>
-                You can share this discount link with your customers via email
-                or social media. Your discount will be automatically applied at
-                checkout.
-              </TextContainer>
-            </LegacyStack.Item>
-            <LegacyStack.Item fill>
-              <TextField
-                ref={node}
-                label="Discount link"
-                onFocus={handleFocus}
-                value={discountLink}
-                onChange={() => {}}
-                autoComplete="off"
-                connectedRight={
-                  <Button primary onClick={handleClick}>
-                    Copy link
-                  </Button>
-                }
-              />
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Get a shareable link"
+          primaryAction={{
+            content: 'Close',
+            onAction: toggleModal,
+          }}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <TextContainer>
+                  You can share this discount link with your customers via email
+                  or social media. Your discount will be automatically applied
+                  at checkout.
+                </TextContainer>
+              </LegacyStack.Item>
+              <LegacyStack.Item fill>
+                <TextField
+                  ref={node}
+                  label="Discount link"
+                  onFocus={handleFocus}
+                  value={discountLink}
+                  onChange={() => {}}
+                  autoComplete="off"
+                  connectedRight={
+                    <Button primary onClick={handleClick}>
+                      Copy link
+                    </Button>
+                  }
+                />
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -151,56 +157,58 @@ export function WithPrimaryAndSecondaryActions() {
   const activator = <Button onClick={handleModalChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleClose}
-        title="Export customers"
-        primaryAction={{
-          content: 'Export customers',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleClose}
+          title="Export customers"
+          primaryAction={{
+            content: 'Export customers',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export"
-                choices={[
-                  {label: 'Current page', value: currentPage},
-                  {label: 'All customers', value: allCustomers},
-                  {label: 'Selected customers', value: selectedCustomers},
-                ]}
-                selected={selectedExport}
-                onChange={handleSelectedExport}
-              />
-            </LegacyStack.Item>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export as"
-                choices={[
-                  {
-                    label:
-                      'CSV for Excel, Numbers, or other spreadsheet programs',
-                    value: csvExcel,
-                  },
-                  {label: 'Plain CSV file', value: csvPlain},
-                ]}
-                selected={selectedExportAs}
-                onChange={handleSelectedExportAs}
-              />
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export"
+                  choices={[
+                    {label: 'Current page', value: currentPage},
+                    {label: 'All customers', value: allCustomers},
+                    {label: 'Selected customers', value: selectedCustomers},
+                  ]}
+                  selected={selectedExport}
+                  onChange={handleSelectedExport}
+                />
+              </LegacyStack.Item>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export as"
+                  choices={[
+                    {
+                      label:
+                        'CSV for Excel, Numbers, or other spreadsheet programs',
+                      value: csvExcel,
+                    },
+                    {label: 'Plain CSV file', value: csvPlain},
+                  ]}
+                  selected={selectedExportAs}
+                  onChange={handleSelectedExportAs}
+                />
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -215,43 +223,45 @@ export function Large() {
   const activator = <Button onClick={toggleActive}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        large
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          large
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -266,43 +276,45 @@ export function Small() {
   const activator = <Button onClick={toggleActive}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        small
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          small
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -314,32 +326,35 @@ export function WithoutATitle() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Reach more shoppers with Instagram product tags"
-        titleHidden
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Reach more shoppers with Instagram product tags"
+          titleHidden
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section titleHidden>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section titleHidden>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -356,23 +371,25 @@ export function WithScrollListener() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        title="Scrollable content"
-        onClose={handleChange}
-        onScrolledToBottom={handleScrollBottom}
-      >
-        {Array.from({length: 50}, (_, index) => (
-          <Modal.Section key={index}>
-            <TextContainer>
-              Item <a href="#Content">#{index}</a>
-            </TextContainer>
-          </Modal.Section>
-        ))}
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          title="Scrollable content"
+          onClose={handleChange}
+          onScrolledToBottom={handleScrollBottom}
+        >
+          {Array.from({length: 50}, (_, index) => (
+            <Modal.Section key={index}>
+              <TextContainer>
+                Item <a href="#Content">#{index}</a>
+              </TextContainer>
+            </Modal.Section>
+          ))}
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -394,32 +411,35 @@ export function WithActivatorRef() {
   );
 
   return (
-    <div style={{height: '500px'}}>
-      {activator}
-      <Modal
-        activator={buttonRef}
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        {activator}
+        <Modal
+          activator={buttonRef}
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -436,144 +456,152 @@ export function WithoutAnActivatorProp() {
   }, []);
 
   return (
-    <div style={{height: '500px'}}>
-      <div ref={button}>
-        <Button onClick={handleOpen}>Open</Button>
-      </div>
-      <Modal
-        instant
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <div ref={button}>
+          <Button onClick={handleOpen}>Open</Button>
+        </div>
+        <Modal
+          instant
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function WithLongContent() {
   return (
-    <Modal
-      title="Long form modal"
-      open
-      onClose={() => {}}
-      primaryAction={{content: 'Save'}}
-    >
-      <Modal.Section>
-        <Banner title="Payment details" />
-      </Modal.Section>
-      <Modal.Section>
-        <FormLayout>
-          <FormLayout.Group>
-            <TextField label="Payment method type" autoComplete="off" />
-            <TextField label="Card number" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Expires" autoComplete="off" />
-            <TextField label="CVV" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Country/region" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="First name" autoComplete="off" />
-            <TextField label="Last name" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Address" autoComplete="off" />
-            <TextField label="Apartment, suite, etc." autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="City" autoComplete="off" />
-            <TextField label="Province" autoComplete="off" />
-            <TextField label="Postal code" autoComplete="off" />
-          </FormLayout.Group>
-        </FormLayout>
-      </Modal.Section>
-    </Modal>
+    <Frame>
+      <Modal
+        title="Long form modal"
+        open
+        onClose={() => {}}
+        primaryAction={{content: 'Save'}}
+      >
+        <Modal.Section>
+          <Banner title="Payment details" />
+        </Modal.Section>
+        <Modal.Section>
+          <FormLayout>
+            <FormLayout.Group>
+              <TextField label="Payment method type" autoComplete="off" />
+              <TextField label="Card number" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Expires" autoComplete="off" />
+              <TextField label="CVV" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Country/region" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="First name" autoComplete="off" />
+              <TextField label="Last name" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Address" autoComplete="off" />
+              <TextField label="Apartment, suite, etc." autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="City" autoComplete="off" />
+              <TextField label="Province" autoComplete="off" />
+              <TextField label="Postal code" autoComplete="off" />
+            </FormLayout.Group>
+          </FormLayout>
+        </Modal.Section>
+      </Modal>
+    </Frame>
   );
 }
 
 export function WithLongContentNoScroll() {
   return (
-    <Modal
-      title="Long form modal"
-      open
-      onClose={() => {}}
-      noScroll
-      primaryAction={{content: 'Save'}}
-    >
-      <Modal.Section>
-        <Banner title="Payment details" />
-      </Modal.Section>
-      <Modal.Section>
-        <FormLayout>
-          <FormLayout.Group>
-            <TextField label="Payment method type" autoComplete="off" />
-            <TextField label="Card number" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Expires" autoComplete="off" />
-            <TextField label="CVV" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Country/region" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="First name" autoComplete="off" />
-            <TextField label="Last name" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Address" autoComplete="off" />
-            <TextField label="Apartment, suite, etc." autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="City" autoComplete="off" />
-            <TextField label="Province" autoComplete="off" />
-            <TextField label="Postal code" autoComplete="off" />
-          </FormLayout.Group>
-        </FormLayout>
-      </Modal.Section>
-    </Modal>
-  );
-}
-
-export function EmbeddedIframe() {
-  return (
-    <div style={{height: '500px'}}>
+    <Frame>
       <Modal
-        title="Embedded iFrame Modal"
+        title="Long form modal"
         open
         onClose={() => {}}
         noScroll
         primaryAction={{content: 'Save'}}
-        src={`data:text/html;charset=utf-8,
+      >
+        <Modal.Section>
+          <Banner title="Payment details" />
+        </Modal.Section>
+        <Modal.Section>
+          <FormLayout>
+            <FormLayout.Group>
+              <TextField label="Payment method type" autoComplete="off" />
+              <TextField label="Card number" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Expires" autoComplete="off" />
+              <TextField label="CVV" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Country/region" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="First name" autoComplete="off" />
+              <TextField label="Last name" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Address" autoComplete="off" />
+              <TextField label="Apartment, suite, etc." autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="City" autoComplete="off" />
+              <TextField label="Province" autoComplete="off" />
+              <TextField label="Postal code" autoComplete="off" />
+            </FormLayout.Group>
+          </FormLayout>
+        </Modal.Section>
+      </Modal>
+    </Frame>
+  );
+}
+
+export function EmbeddedIframe() {
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Embedded iFrame Modal"
+          open
+          onClose={() => {}}
+          noScroll
+          primaryAction={{content: 'Save'}}
+          src={`data:text/html;charset=utf-8,
 <style>
   /* Modified from Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */
   *, *::before, *::after { box-sizing: border-box; }
@@ -586,67 +614,74 @@ export function EmbeddedIframe() {
     Hello.
   </h1>
 </main>`}
-      />
-    </div>
+        />
+      </div>
+    </Frame>
   );
 }
 
 export function SectionedProp() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Sectioned modal"
-        open
-        onClose={() => {}}
-        sectioned
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">First section</Text>
-        <Text as="p">Second section</Text>
-        <Modal.Section>
-          <Text as="p">Nested section</Text>
-        </Modal.Section>
-        <Text as="p">Fourth section</Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Sectioned modal"
+          open
+          onClose={() => {}}
+          sectioned
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">First section</Text>
+          <Text as="p">Second section</Text>
+          <Modal.Section>
+            <Text as="p">Nested section</Text>
+          </Modal.Section>
+          <Text as="p">Fourth section</Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function Loading() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Loading modal"
-        open
-        onClose={() => {}}
-        loading
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">First section</Text>
-        <Text as="p">Second section</Text>
-        <Text as="p">Third section</Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Loading modal"
+          open
+          onClose={() => {}}
+          loading
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">First section</Text>
+          <Text as="p">Second section</Text>
+          <Text as="p">Third section</Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function Fullscreen() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Fullscreen modal"
-        open
-        onClose={() => {}}
-        sectioned
-        fullScreen
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">Fullscreen on small displays</Text>
-        <Text as="p">
-          When <code>(max-width: 47.9975em)</code>, the modal will be made{' '}
-          <code>height: 100%</code>
-        </Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Fullscreen modal"
+          open
+          onClose={() => {}}
+          sectioned
+          fullScreen
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">Fullscreen on small displays</Text>
+          <Text as="p">
+            When <code>(max-width: 47.9975em)</code>, the modal will be made{' '}
+            <code>height: 100%</code>
+          </Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
index c7a14ae1ce1..3b3fb3a761e 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
@@ -8,6 +8,8 @@ import {focusFirstFocusableNode} from '../../../../utilities/focus';
 import {Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {TrapFocus} from '../../../TrapFocus';
+import {useFrame} from '../../../../utilities/frame';
+import {Text} from '../../../Text';
 
 import styles from './Dialog.scss';
 
@@ -26,6 +28,7 @@ export interface DialogProps {
   in?: boolean;
   fullScreen?: boolean;
   setClosing?: Dispatch<SetStateAction<boolean>>;
+  hasToasts?: boolean;
 }
 
 export function Dialog({
@@ -40,9 +43,12 @@ export function Dialog({
   limitHeight,
   fullScreen,
   setClosing,
+  hasToasts,
   ...props
 }: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(null);
+  const {toastMessages} = useFrame();
+
   const classes = classNames(
     styles.Modal,
     small && styles.sizeSmall,
@@ -105,6 +111,15 @@ export function Dialog({
               <KeypressListener keyCode={Key.Escape} handler={handleKeyUp} />
               {children}
             </div>
+            <div aria-live="assertive">
+              {toastMessages
+                ? toastMessages.map((toastMessage) => (
+                    <Text visuallyHidden as="p" key={toastMessage.id}>
+                      {toastMessage.content}
+                    </Text>
+                  ))
+                : null}
+            </div>
           </div>
         </TrapFocus>
       </div>
diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
index c794e6040f9..3078d25240b 100644
--- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -110,6 +110,7 @@ function createFrameContext({
   logo = undefined,
   showToast = noop,
   hideToast = noop,
+  toastMessages = [],
   setContextualSaveBar = noop,
   removeContextualSaveBar = noop,
   startLoading = noop,
@@ -119,6 +120,7 @@ function createFrameContext({
     logo,
     showToast,
     hideToast,
+    toastMessages,
     setContextualSaveBar,
     removeContextualSaveBar,
     startLoading,
diff --git a/polaris-react/src/components/Toast/Toast.stories.tsx b/polaris-react/src/components/Toast/Toast.stories.tsx
index fbcecd1b287..59c35b1fdfe 100644
--- a/polaris-react/src/components/Toast/Toast.stories.tsx
+++ b/polaris-react/src/components/Toast/Toast.stories.tsx
@@ -7,6 +7,11 @@ import {
   HorizontalStack,
   Page,
   Toast,
+  Modal,
+  TextContainer,
+  Popover,
+  ActionList,
+  VerticalStack,
 } from '@shopify/polaris';
 
 export default {
@@ -142,3 +147,75 @@ export function Error() {
     </div>
   );
 }
+
+export function InsideModal() {
+  const [toastActive, setToastActive] = useState(false);
+  const [toast2Active, setToast2Active] = useState(false);
+  const [modalActive, setModalActive] = useState(true);
+
+  const handleChange = useCallback(
+    () => setModalActive(!modalActive),
+    [modalActive],
+  );
+
+  const toggleActive = useCallback(
+    () => setToastActive((toastActive) => !toastActive),
+    [],
+  );
+
+  const toggle2Active = useCallback(
+    () => setToast2Active((toastActive) => !toastActive),
+    [],
+  );
+
+  const activator = <Button onClick={handleChange}>Open</Button>;
+
+  const toastMarkup = toastActive ? (
+    <Toast content="Message sent" onDismiss={toggleActive} />
+  ) : null;
+
+  const toast2Markup = toast2Active ? (
+    <Toast content="Another sent" onDismiss={toggle2Active} />
+  ) : null;
+
+  return (
+    <div style={{height: '500px'}}>
+      <Frame>
+        <Page title="Default">
+          {toastMarkup}
+          {toast2Markup}
+          <Modal
+            activator={activator}
+            open={modalActive}
+            onClose={handleChange}
+            title="Reach more shoppers with Instagram product tags"
+            primaryAction={{
+              content: 'Add Instagram',
+              onAction: handleChange,
+            }}
+            secondaryActions={[
+              {
+                content: 'Learn more',
+                onAction: handleChange,
+              },
+            ]}
+          >
+            <Modal.Section>
+              <VerticalStack gap="2">
+                <TextContainer>
+                  Use Instagram posts to share your products with millions of
+                  people. Let shoppers buy from your store without leaving
+                  Instagram.
+                </TextContainer>
+                <HorizontalStack gap="2">
+                  <Button onClick={toggleActive}>Show Toast</Button>
+                  <Button onClick={toggle2Active}>Show Other Toast</Button>
+                </HorizontalStack>
+              </VerticalStack>
+            </Modal.Section>
+          </Modal>
+        </Page>
+      </Frame>
+    </div>
+  );
+}
diff --git a/polaris-react/src/utilities/frame/context.ts b/polaris-react/src/utilities/frame/context.ts
index 828bb3b426f..bec521524e4 100644
--- a/polaris-react/src/utilities/frame/context.ts
+++ b/polaris-react/src/utilities/frame/context.ts
@@ -12,6 +12,7 @@ export interface FrameContextType {
   logo?: Logo;
   showToast(toast: ToastPropsWithID): void;
   hideToast(toast: ToastID): void;
+  toastMessages: ToastPropsWithID[];
   setContextualSaveBar(props: ContextualSaveBarProps): void;
   removeContextualSaveBar(): void;
   startLoading(): void;

From 14edd2f6ce6b9cd685f95cc01d6eaaa9edd2f94c Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 11:16:49 +0100
Subject: [PATCH 4/6] chore: export useFrame

---
 polaris-react/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 1f98475f36d..e95aa886d06 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -419,7 +419,7 @@ export {
   rgbaString,
   hexToRgb,
 } from './utilities/color-transformers';
-
+export {useFrame} from './utilities/frame';
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 export {useEventListener} from './utilities/use-event-listener';

From d7da142da51da965b0962f4ec799c6b39b2374da Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 12:20:20 +0100
Subject: [PATCH 5/6] chore: fix a11y test for strybook containing iframe

---
 .../src/components/Modal/Modal.stories.tsx        | 15 +++++++++++++--
 polaris-react/src/index.ts                        |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx
index a5a9fdddfbf..0b804eedffe 100644
--- a/polaris-react/src/components/Modal/Modal.stories.tsx
+++ b/polaris-react/src/components/Modal/Modal.stories.tsx
@@ -13,6 +13,7 @@ import {
   TextContainer,
   TextField,
   Frame,
+  FrameContext,
 } from '@shopify/polaris';
 
 export default {
@@ -591,9 +592,19 @@ export function WithLongContentNoScroll() {
   );
 }
 
+const context = {
+  logo: undefined,
+  showToast: () => {},
+  hideToast: () => {},
+  toastMessages: [],
+  startLoading: () => {},
+  stopLoading: () => {},
+  setContextualSaveBar: () => {},
+  removeContextualSaveBar: () => {},
+};
 export function EmbeddedIframe() {
   return (
-    <Frame>
+    <FrameContext.Provider value={context}>
       <div style={{height: '500px'}}>
         <Modal
           title="Embedded iFrame Modal"
@@ -616,7 +627,7 @@ export function EmbeddedIframe() {
 </main>`}
         />
       </div>
-    </Frame>
+    </FrameContext.Provider>
   );
 }
 
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index e95aa886d06..0fdb30948db 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -419,7 +419,7 @@ export {
   rgbaString,
   hexToRgb,
 } from './utilities/color-transformers';
-export {useFrame} from './utilities/frame';
+export {useFrame, FrameContext} from './utilities/frame';
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 export {useEventListener} from './utilities/use-event-listener';

From a01c3b109f1f049b025f50f74a67ee3a5c837502 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 12:29:32 +0100
Subject: [PATCH 6/6] chore: test for presence of toasts within Dialog

---
 .../components/Dialog/tests/Dialog.test.tsx   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
index 04a6233ba0b..ff1d69a14b1 100644
--- a/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
+++ b/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
@@ -3,6 +3,7 @@ import {animationFrame} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {KeypressListener} from '../../../../KeypressListener';
+import {Text} from '../../../../Text';
 import {Dialog} from '../Dialog';
 
 describe('<Dialog>', () => {
@@ -37,6 +38,28 @@ describe('<Dialog>', () => {
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
+
+  it('renders any toast messages passed from the frame context within the Dialog', () => {
+    const toastMessages = [
+      {id: 'toast-1', content: 'Toast 1', onDismiss: noop},
+      {id: 'toast-2', content: 'Toast 2', onDismiss: noop},
+    ];
+    const dialog = mountWithApp(
+      <Dialog labelledBy="test" onClose={noop} in>
+        something
+      </Dialog>,
+      {
+        frame: {
+          toastMessages,
+        },
+      },
+    );
+    toastMessages.forEach((toastMessage) => {
+      expect(dialog).toContainReactComponent(Text, {
+        children: toastMessage.content,
+      });
+    });
+  });
 });
 
 function noop() {}