[Modal] Only announce toast messages if frame context exists

.changeset/brave-ties-pay.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Modal` missing `FrameContext` error

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>