From 2580d290eb0d706ffb0a6c952896d5c66b3c4637 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 9 Aug 2024 12:57:34 +0800
Subject: [PATCH] fix: Avoid using aria-hidden on a focused element (#451)

---
 src/Dialog/Content/Panel.tsx            |  8 +++----
 tests/__snapshots__/index.spec.tsx.snap | 32 ++++---------------------
 2 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index de5684ca..e1653208 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -55,11 +55,10 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
 
   const sentinelStartRef = useRef<HTMLDivElement>();
   const sentinelEndRef = useRef<HTMLDivElement>();
-  const entityRef = useRef<HTMLDivElement>();
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      entityRef.current?.focus({ preventScroll: true });
+      sentinelStartRef.current?.focus({ preventScroll: true });
     },
     changeActive: (next) => {
       const { activeElement } = document;
@@ -157,13 +156,12 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
     >
-      <div tabIndex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
-      <div ref={entityRef} tabIndex={-1} style={entityStyle}>
+      <div ref={sentinelStartRef} tabIndex={0} style={entityStyle}>
         <MemoChildren shouldUpdate={visible || forceRender}>
           {modalRender ? modalRender(content) : content}
         </MemoChildren>
       </div>
-      <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
+      <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} />
     </div>
   );
 });
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 1c6e7784..a3102224 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -18,14 +18,9 @@ exports[`dialog add rootClassName should render correct 1`] = `
       role="dialog"
       style="width: 600px; height: 903px;"
     >
-      <div
-        aria-hidden="true"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
       <div
         style="outline: none;"
-        tabindex="-1"
+        tabindex="0"
       >
         <div
           class="rc-dialog-content"
@@ -45,7 +40,6 @@ exports[`dialog add rootClassName should render correct 1`] = `
         </div>
       </div>
       <div
-        aria-hidden="true"
         style="width: 0px; height: 0px; overflow: hidden; outline: none;"
         tabindex="0"
       />
@@ -71,14 +65,9 @@ exports[`dialog should render correct 1`] = `
       class="rc-dialog"
       role="dialog"
     >
-      <div
-        aria-hidden="true"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
       <div
         style="outline: none;"
-        tabindex="-1"
+        tabindex="0"
       >
         <div
           class="rc-dialog-content"
@@ -108,7 +97,6 @@ exports[`dialog should render correct 1`] = `
         </div>
       </div>
       <div
-        aria-hidden="true"
         style="width: 0px; height: 0px; overflow: hidden; outline: none;"
         tabindex="0"
       />
@@ -135,14 +123,9 @@ exports[`dialog should support classNames 1`] = `
       role="dialog"
       style="width: 600px; height: 903px;"
     >
-      <div
-        aria-hidden="true"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
       <div
         style="outline: none;"
-        tabindex="-1"
+        tabindex="0"
       >
         <div
           class="rc-dialog-content custom-content"
@@ -177,7 +160,6 @@ exports[`dialog should support classNames 1`] = `
         </div>
       </div>
       <div
-        aria-hidden="true"
         style="width: 0px; height: 0px; overflow: hidden; outline: none;"
         tabindex="0"
       />
@@ -206,14 +188,9 @@ exports[`dialog should support styles 1`] = `
       role="dialog"
       style="width: 600px; height: 903px;"
     >
-      <div
-        aria-hidden="true"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
-        tabindex="0"
-      />
       <div
         style="outline: none;"
-        tabindex="-1"
+        tabindex="0"
       >
         <div
           class="rc-dialog-content"
@@ -252,7 +229,6 @@ exports[`dialog should support styles 1`] = `
         </div>
       </div>
       <div
-        aria-hidden="true"
         style="width: 0px; height: 0px; overflow: hidden; outline: none;"
         tabindex="0"
       />