From a945d1ebf552153b17fc22f3bbcf34b96e3cc524 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Mon, 25 Sep 2023 14:44:36 -0400
Subject: [PATCH] [Modal] Only announce toast messages if frame context exists

---
 .changeset/brave-ties-pay.md                  |  5 +++
 .../Modal/components/Dialog/Dialog.tsx        | 33 ++++++++++++-------
 2 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/brave-ties-pay.md

diff --git a/.changeset/brave-ties-pay.md b/.changeset/brave-ties-pay.md
new file mode 100644
index 00000000000..4bafe559cd9
--- /dev/null
+++ b/.changeset/brave-ties-pay.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Modal` missing `FrameContext` error
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
index 3b3fb3a761e..96bfe753a8c 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useContext, useRef, useEffect} from 'react';
 import type {SetStateAction, Dispatch} from 'react';
 import {Transition, CSSTransition} from 'react-transition-group';
 import {motion} from '@shopify/polaris-tokens';
@@ -8,8 +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 {FrameContext} from '../../../../utilities/frame';
 
 import styles from './Dialog.scss';
 
@@ -47,7 +47,12 @@ export function Dialog({
   ...props
 }: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(null);
-  const {toastMessages} = useFrame();
+  const frameContext = useContext(FrameContext);
+  let toastMessages;
+
+  if (frameContext) {
+    toastMessages = frameContext.toastMessages;
+  }
 
   const classes = classNames(
     styles.Modal,
@@ -77,6 +82,18 @@ export function Dialog({
     onClose();
   };
 
+  const ariaLiveAnnouncements = (
+    <div aria-live="assertive">
+      {toastMessages
+        ? toastMessages.map((toastMessage) => (
+            <Text visuallyHidden as="p" key={toastMessage.id}>
+              {toastMessage.content}
+            </Text>
+          ))
+        : null}
+    </div>
+  );
+
   return (
     <TransitionChild
       {...props}
@@ -111,15 +128,7 @@ 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>
+            {ariaLiveAnnouncements}
           </div>
         </TrapFocus>
       </div>