From 2f25bf61f532be4b202d20d575f6135b8129a406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 9 Dec 2025 17:28:16 +0800
Subject: [PATCH 1/3] chore: init

---
 package.json                 | 2 +-
 src/Dialog/Content/Panel.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 90bea5ea..c5d71551 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",
     "classnames": "^2.2.6"
   },
   "devDependencies": {
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 1fbfcd92..53f91238 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 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';

From f1231960cd43a34cea0411bce51bd9d141a8cc1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 9 Dec 2025 18:42:55 +0800
Subject: [PATCH 2/3] chore: focus refactor

---
 src/Dialog/Content/Panel.tsx | 39 ++++++++----------------------------
 src/Dialog/index.tsx         |  7 -------
 2 files changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 53f91238..0c7e6e1d 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -7,17 +7,6 @@ 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;
@@ -28,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) => {
@@ -59,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 });
     },
   }));
 
@@ -168,13 +147,11 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       className={classNames(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 3512e772..018e2446 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={classNames(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}

From a3279ffc6e1cd27e4d4e08487abbba28bf9afda9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 9 Dec 2025 18:55:12 +0800
Subject: [PATCH 3/3] test: clean up

---
 tests/__snapshots__/index.spec.tsx.snap | 198 ++++++++++--------------
 tests/index.spec.tsx                    |  29 ----
 2 files changed, 81 insertions(+), 146 deletions(-)

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(