fix: Avoid using aria-hidden on a focused element (#451)

Author: afc163

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>
   );
 });

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"
       />