diff --git a/packages/ui-modal/src/Modal/v1/index.tsx b/packages/ui-modal/src/Modal/v1/index.tsx
index 366541e29e..ec2e14026a 100644
--- a/packages/ui-modal/src/Modal/v1/index.tsx
+++ b/packages/ui-modal/src/Modal/v1/index.tsx
@@ -107,6 +107,14 @@ class Modal extends Component<ModalProps, ModalState> {
   componentDidUpdate(prevProps: ModalProps) {
     if (this.props.open !== prevProps.open) {
       this.setState({ transitioning: true, open: !!this.props.open })
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur()
+      }
     }
     this.props.makeStyles?.()
   }
@@ -284,31 +292,31 @@ class Modal extends Component<ModalProps, ModalState> {
         onOpen={this.handlePortalOpen}
         data-cid="Modal"
       >
-        <Transition
-          in={open}
-          transitionOnMount
-          type={transition}
-          onEnter={onEnter}
-          onEntering={onEntering}
-          onEntered={createChainedFunction(
-            this.handleTransitionComplete,
-            onEntered,
-            onOpen
-          )}
-          onExit={onExit}
-          onExiting={onExiting}
-          onExited={createChainedFunction(
-            this.handleTransitionComplete,
-            onExited,
-            onClose
-          )}
+        <ModalContext.Provider
+          value={{
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: (txt: string) =>
+              this.setState({ bodyScrollAriaLabel: txt })
+          }}
         >
-          <ModalContext.Provider
-            value={{
-              bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-              setBodyScrollAriaLabel: (txt: string) =>
-                this.setState({ bodyScrollAriaLabel: txt })
-            }}
+          <Transition
+            in={open}
+            transitionOnMount
+            type={transition}
+            onEnter={onEnter}
+            onEntering={onEntering}
+            onEntered={createChainedFunction(
+              this.handleTransitionComplete,
+              onEntered,
+              onOpen
+            )}
+            onExit={onExit}
+            onExiting={onExiting}
+            onExited={createChainedFunction(
+              this.handleTransitionComplete,
+              onExited,
+              onClose
+            )}
           >
             {constrain === 'parent' ? (
               <span css={this.props.styles?.constrainContext}>
@@ -317,8 +325,8 @@ class Modal extends Component<ModalProps, ModalState> {
             ) : (
               this.renderDialog(passthroughProps)
             )}
-          </ModalContext.Provider>
-        </Transition>
+          </Transition>
+        </ModalContext.Provider>
       </Portal>
     )
   }
diff --git a/packages/ui-modal/src/Modal/v2/README.md b/packages/ui-modal/src/Modal/v2/README.md
index 27e3f7d192..937d96f2a5 100644
--- a/packages/ui-modal/src/Modal/v2/README.md
+++ b/packages/ui-modal/src/Modal/v2/README.md
@@ -618,16 +618,12 @@ You can do this with the `insertAt` prop or a theme override:
   type: code
 ---
 <InstUISettingsProvider
-      theme={{
-        themeOverrides: {
-            componentOverrides: {
-              Mask: {
-                zIndex: 555,
-              }
-            }
-          }
-      }}
-    >
+  themeOverride={{
+    Mask: {
+      zIndex: 555
+    }
+  }}
+>
   <Modal />
 </InstUISettingsProvider>
 ```
diff --git a/packages/ui-modal/src/Modal/v2/index.tsx b/packages/ui-modal/src/Modal/v2/index.tsx
index f301d08c3a..37950b4c2a 100644
--- a/packages/ui-modal/src/Modal/v2/index.tsx
+++ b/packages/ui-modal/src/Modal/v2/index.tsx
@@ -106,6 +106,14 @@ class Modal extends Component<ModalProps, ModalState> {
   componentDidUpdate(prevProps: ModalProps) {
     if (this.props.open !== prevProps.open) {
       this.setState({ transitioning: true, open: !!this.props.open })
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur()
+      }
     }
     this.props.makeStyles?.()
   }
@@ -205,8 +213,7 @@ class Modal extends Component<ModalProps, ModalState> {
       | keyof ModalPropsForTransition
       | 'constrain'
       | 'overflow'
-    >,
-    open?: boolean
+    >
   ) {
     const {
       onDismiss,
@@ -225,7 +232,7 @@ class Modal extends Component<ModalProps, ModalState> {
       <Dialog
         {...passthroughProps(props)}
         as={as}
-        open={open && !this.state.transitioning}
+        open
         label={label}
         defaultFocusElement={this.defaultFocusElement}
         shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
@@ -284,41 +291,41 @@ class Modal extends Component<ModalProps, ModalState> {
         onOpen={this.handlePortalOpen}
         data-cid="Modal"
       >
-        <Transition
-          in={open}
-          transitionOnMount
-          type={transition}
-          onEnter={onEnter}
-          onEntering={onEntering}
-          onEntered={createChainedFunction(
-            this.handleTransitionComplete,
-            onEntered,
-            onOpen
-          )}
-          onExit={onExit}
-          onExiting={onExiting}
-          onExited={createChainedFunction(
-            this.handleTransitionComplete,
-            onExited,
-            onClose
-          )}
+        <ModalContext.Provider
+          value={{
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: (txt: string) =>
+              this.setState({ bodyScrollAriaLabel: txt })
+          }}
         >
-          <ModalContext.Provider
-            value={{
-              bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-              setBodyScrollAriaLabel: (txt: string) =>
-                this.setState({ bodyScrollAriaLabel: txt })
-            }}
+          <Transition
+            in={open}
+            transitionOnMount
+            type={transition}
+            onEnter={onEnter}
+            onEntering={onEntering}
+            onEntered={createChainedFunction(
+              this.handleTransitionComplete,
+              onEntered,
+              onOpen
+            )}
+            onExit={onExit}
+            onExiting={onExiting}
+            onExited={createChainedFunction(
+              this.handleTransitionComplete,
+              onExited,
+              onClose
+            )}
           >
             {constrain === 'parent' ? (
               <span css={this.props.styles?.constrainContext}>
-                {this.renderDialog(passthroughProps, open)}
+                {this.renderDialog(passthroughProps)}
               </span>
             ) : (
-              this.renderDialog(passthroughProps, open)
+              this.renderDialog(passthroughProps)
             )}
-          </ModalContext.Provider>
-        </Transition>
+          </Transition>
+        </ModalContext.Provider>
       </Portal>
     )
   }