diff --git a/package.json b/package.json
index c7a7f609..98cfb45f 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
+    "@rc-component/util": "^1.5.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 973a7222..a6eebaee 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -1,22 +1,12 @@
 import { clsx } from 'clsx';
 import { useComposeRef } from '@rc-component/util/lib/ref';
+import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
 import React, { useMemo, useRef } from 'react';
 import { RefContext } from '../../context';
 import type { IDialogPropTypes } from '../../IDialogPropTypes';
 import MemoChildren from './MemoChildren';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
-const sentinelStyle: React.CSSProperties = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-};
-
-const entityStyle: React.CSSProperties = {
-  outline: 'none',
-};
-
 export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   prefixCls: string;
   ariaId?: string;
@@ -27,7 +17,6 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
 
 export type PanelRef = {
   focus: () => void;
-  changeActive: (next: boolean) => void;
 };
 
 const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
@@ -58,23 +47,14 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   // ================================= Refs =================================
   const { panel: panelRef } = React.useContext(RefContext);
+  const internalRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
 
-  const mergedRef = useComposeRef(holderRef, panelRef);
-
-  const sentinelStartRef = useRef<HTMLDivElement>(null);
-  const sentinelEndRef = useRef<HTMLDivElement>(null);
+  useLockFocus(visible, () => internalRef.current);
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      sentinelStartRef.current?.focus({ preventScroll: true });
-    },
-    changeActive: (next) => {
-      const { activeElement } = document;
-      if (next && activeElement === sentinelEndRef.current) {
-        sentinelStartRef.current.focus({ preventScroll: true });
-      } else if (!next && activeElement === sentinelStartRef.current) {
-        sentinelEndRef.current.focus({ preventScroll: true });
-      }
+      internalRef.current?.focus({ preventScroll: true });
     },
   }));
 
@@ -167,13 +147,11 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       className={clsx(prefixCls, className)}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
+      tabIndex={-1}
     >
-      <div ref={sentinelStartRef} tabIndex={0} style={entityStyle}>
-        <MemoChildren shouldUpdate={visible || forceRender}>
-          {modalRender ? modalRender(content) : content}
-        </MemoChildren>
-      </div>
-      <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} />
+      <MemoChildren shouldUpdate={visible || forceRender}>
+        {modalRender ? modalRender(content) : content}
+      </MemoChildren>
     </div>
   );
 });
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 456e7f14..460f263b 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -47,7 +47,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
 
   if (process.env.NODE_ENV !== 'production') {
     ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach((prop) => {
-      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
       warning(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
     if ('wrapClassName' in props) {
@@ -148,11 +147,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === KeyCode.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -200,7 +194,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         className={modalClassNames?.mask}
       />
       <div
-        tabIndex={-1}
         onKeyDown={onWrapperKeyDown}
         className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 8c47cc1e..dc679362 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -11,39 +11,30 @@ exports[`dialog add rootClassName and rootStyle should render correct 1`] = `
   <div
     class="rc-dialog-wrap"
     style="font-size: 10px;"
-    tabindex="-1"
   >
     <div
       aria-modal="true"
       class="rc-dialog"
       role="dialog"
       style="width: 600px; height: 903px;"
+      tabindex="-1"
     >
       <div
-        style="outline: none;"
-        tabindex="0"
+        class="rc-dialog-container"
       >
-        <div
-          class="rc-dialog-container"
+        <button
+          aria-label="Close"
+          class="rc-dialog-close"
+          type="button"
         >
-          <button
-            aria-label="Close"
-            class="rc-dialog-close"
-            type="button"
-          >
-            <span
-              class="rc-dialog-close-x"
-            />
-          </button>
-          <div
-            class="rc-dialog-body"
+          <span
+            class="rc-dialog-close-x"
           />
-        </div>
+        </button>
+        <div
+          class="rc-dialog-body"
+        />
       </div>
-      <div
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
     </div>
   </div>
 </div>
@@ -58,49 +49,40 @@ exports[`dialog should render correct 1`] = `
   />
   <div
     class="rc-dialog-wrap"
-    tabindex="-1"
   >
     <div
       aria-labelledby="test-id"
       aria-modal="true"
       class="rc-dialog"
       role="dialog"
+      tabindex="-1"
     >
       <div
-        style="outline: none;"
-        tabindex="0"
+        class="rc-dialog-container"
       >
+        <button
+          aria-label="Close"
+          class="rc-dialog-close"
+          type="button"
+        >
+          <span
+            class="rc-dialog-close-x"
+          />
+        </button>
         <div
-          class="rc-dialog-container"
+          class="rc-dialog-header"
         >
-          <button
-            aria-label="Close"
-            class="rc-dialog-close"
-            type="button"
-          >
-            <span
-              class="rc-dialog-close-x"
-            />
-          </button>
           <div
-            class="rc-dialog-header"
+            class="rc-dialog-title"
+            id="test-id"
           >
-            <div
-              class="rc-dialog-title"
-              id="test-id"
-            >
-              Default
-            </div>
+            Default
           </div>
-          <div
-            class="rc-dialog-body"
-          />
         </div>
+        <div
+          class="rc-dialog-body"
+        />
       </div>
-      <div
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
     </div>
   </div>
 </div>
@@ -115,7 +97,6 @@ exports[`dialog should support classNames 1`] = `
   />
   <div
     class="rc-dialog-wrap custom-wrapper"
-    tabindex="-1"
   >
     <div
       aria-labelledby="test-id"
@@ -123,47 +104,39 @@ exports[`dialog should support classNames 1`] = `
       class="rc-dialog"
       role="dialog"
       style="width: 600px; height: 903px;"
+      tabindex="-1"
     >
       <div
-        style="outline: none;"
-        tabindex="0"
+        class="rc-dialog-container custom-container"
       >
-        <div
-          class="rc-dialog-container custom-container"
+        <button
+          aria-label="Close"
+          class="rc-dialog-close"
+          type="button"
         >
-          <button
-            aria-label="Close"
-            class="rc-dialog-close"
-            type="button"
-          >
-            <span
-              class="rc-dialog-close-x"
-            />
-          </button>
-          <div
-            class="rc-dialog-header custom-header"
-          >
-            <div
-              class="rc-dialog-title"
-              id="test-id"
-            >
-              Default
-            </div>
-          </div>
-          <div
-            class="rc-dialog-body custom-body"
+          <span
+            class="rc-dialog-close-x"
           />
+        </button>
+        <div
+          class="rc-dialog-header custom-header"
+        >
           <div
-            class="rc-dialog-footer custom-footer"
+            class="rc-dialog-title"
+            id="test-id"
           >
-            Footer
+            Default
           </div>
         </div>
+        <div
+          class="rc-dialog-body custom-body"
+        />
+        <div
+          class="rc-dialog-footer custom-footer"
+        >
+          Footer
+        </div>
       </div>
-      <div
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
     </div>
   </div>
 </div>
@@ -180,7 +153,6 @@ exports[`dialog should support styles 1`] = `
   <div
     class="rc-dialog-wrap"
     style="background: pink;"
-    tabindex="-1"
   >
     <div
       aria-labelledby="test-id"
@@ -188,52 +160,44 @@ exports[`dialog should support styles 1`] = `
       class="rc-dialog"
       role="dialog"
       style="width: 600px; height: 903px;"
+      tabindex="-1"
     >
       <div
-        style="outline: none;"
-        tabindex="0"
+        class="rc-dialog-container"
+        style="background: orange;"
       >
-        <div
-          class="rc-dialog-container"
-          style="background: orange;"
+        <button
+          aria-label="Close"
+          class="rc-dialog-close"
+          type="button"
         >
-          <button
-            aria-label="Close"
-            class="rc-dialog-close"
-            type="button"
-          >
-            <span
-              class="rc-dialog-close-x"
-            />
-          </button>
-          <div
-            class="rc-dialog-header"
-            style="background: red;"
-          >
-            <div
-              class="rc-dialog-title"
-              id="test-id"
-              style="background: orange;"
-            >
-              Default
-            </div>
-          </div>
-          <div
-            class="rc-dialog-body"
-            style="background: green;"
+          <span
+            class="rc-dialog-close-x"
           />
+        </button>
+        <div
+          class="rc-dialog-header"
+          style="background: red;"
+        >
           <div
-            class="rc-dialog-footer"
-            style="background: blue;"
+            class="rc-dialog-title"
+            id="test-id"
+            style="background: orange;"
           >
-            Footer
+            Default
           </div>
         </div>
+        <div
+          class="rc-dialog-body"
+          style="background: green;"
+        />
+        <div
+          class="rc-dialog-footer"
+          style="background: blue;"
+        >
+          Footer
+        </div>
       </div>
-      <div
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
     </div>
   </div>
 </div>
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index bd7274c7..a00c5c4a 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -239,35 +239,6 @@ describe('dialog', () => {
     expect(document.querySelector('input')).toHaveFocus();
   });
 
-  describe('Tab should keep focus in dialog', () => {
-    it('basic tabbing', () => {
-      render(<Dialog visible />);
-      const sentinelEnd = document.querySelector<HTMLDivElement>('.rc-dialog > div:last-child');
-      sentinelEnd.focus();
-
-      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
-        keyCode: KeyCode.TAB,
-      });
-
-      const sentinelStart = document.querySelector('.rc-dialog > div:first-child');
-      expect(document.activeElement).toBe(sentinelStart);
-    });
-
-    it('trap focus after shift-tabbing', () => {
-      render(<Dialog visible />);
-
-      document.querySelector<HTMLDivElement>('.rc-dialog > div:first-child').focus();
-
-      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
-        keyCode: KeyCode.TAB,
-        key: 'Tab',
-        shiftKey: true,
-      });
-      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
-      expect(document.activeElement).toBe(sentinelEnd);
-    });
-  });
-
   describe('mousePosition', () => {
     function prepareModal(mousePosition: { x: number; y: number }) {
       const { container } = render(