From e2d12f4fdd6b5a1c719947713ab72288d978436f Mon Sep 17 00:00:00 2001
From: wahiche-ideal <58079759+wahiche-ideal@users.noreply.github.com>
Date: Fri, 26 Jan 2024 22:20:50 -0500
Subject: [PATCH] feat: Support document.activeElement (#393)

Co-authored-by: huangbangsheng <huangbangsheng@joyy.com>
---
 src/Dialog/Content/Panel.tsx            |  12 +-
 tests/__snapshots__/index.spec.tsx.snap | 172 +++++++++++++-----------
 tests/index.spec.tsx                    |  41 +++---
 3 files changed, 127 insertions(+), 98 deletions(-)

diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 2aa492af..2be44237 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -6,6 +6,7 @@ import type { IDialogPropTypes } from '../../IDialogPropTypes';
 import MemoChildren from './MemoChildren';
 
 const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
+const entityStyle = { outline: 'none' };
 
 export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   prefixCls: string;
@@ -53,10 +54,11 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
 
   const sentinelStartRef = useRef<HTMLDivElement>();
   const sentinelEndRef = useRef<HTMLDivElement>();
+  const entityRef = useRef<HTMLDivElement>();
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      sentinelStartRef.current?.focus();
+      entityRef.current?.focus();
     },
     changeActive: (next) => {
       const { activeElement } = document;
@@ -130,9 +132,11 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       onMouseUp={onMouseUp}
     >
       <div tabIndex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
-      <MemoChildren shouldUpdate={visible || forceRender}>
-        {modalRender ? modalRender(content) : content}
-      </MemoChildren>
+      <div ref={entityRef} tabIndex={-1} style={entityStyle}>
+        <MemoChildren shouldUpdate={visible || forceRender}>
+          {modalRender ? modalRender(content) : content}
+        </MemoChildren>
+      </div>
       <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
     </div>
   );
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 4f9728d2..1c6e7784 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -24,20 +24,25 @@ exports[`dialog add rootClassName should render correct 1`] = `
         tabindex="0"
       />
       <div
-        class="rc-dialog-content"
+        style="outline: none;"
+        tabindex="-1"
       >
-        <button
-          aria-label="Close"
-          class="rc-dialog-close"
-          type="button"
+        <div
+          class="rc-dialog-content"
         >
-          <span
-            class="rc-dialog-close-x"
+          <button
+            aria-label="Close"
+            class="rc-dialog-close"
+            type="button"
+          >
+            <span
+              class="rc-dialog-close-x"
+            />
+          </button>
+          <div
+            class="rc-dialog-body"
           />
-        </button>
-        <div
-          class="rc-dialog-body"
-        />
+        </div>
       </div>
       <div
         aria-hidden="true"
@@ -72,30 +77,35 @@ exports[`dialog should render correct 1`] = `
         tabindex="0"
       />
       <div
-        class="rc-dialog-content"
+        style="outline: none;"
+        tabindex="-1"
       >
-        <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-content"
         >
+          <button
+            aria-label="Close"
+            class="rc-dialog-close"
+            type="button"
+          >
+            <span
+              class="rc-dialog-close-x"
+            />
+          </button>
           <div
-            class="rc-dialog-title"
-            id="test-id"
+            class="rc-dialog-header"
           >
-            Default
+            <div
+              class="rc-dialog-title"
+              id="test-id"
+            >
+              Default
+            </div>
           </div>
+          <div
+            class="rc-dialog-body"
+          />
         </div>
-        <div
-          class="rc-dialog-body"
-        />
       </div>
       <div
         aria-hidden="true"
@@ -131,34 +141,39 @@ exports[`dialog should support classNames 1`] = `
         tabindex="0"
       />
       <div
-        class="rc-dialog-content custom-content"
+        style="outline: none;"
+        tabindex="-1"
       >
-        <button
-          aria-label="Close"
-          class="rc-dialog-close"
-          type="button"
-        >
-          <span
-            class="rc-dialog-close-x"
-          />
-        </button>
         <div
-          class="rc-dialog-header custom-header"
+          class="rc-dialog-content custom-content"
         >
+          <button
+            aria-label="Close"
+            class="rc-dialog-close"
+            type="button"
+          >
+            <span
+              class="rc-dialog-close-x"
+            />
+          </button>
           <div
-            class="rc-dialog-title"
-            id="test-id"
+            class="rc-dialog-header custom-header"
           >
-            Default
+            <div
+              class="rc-dialog-title"
+              id="test-id"
+            >
+              Default
+            </div>
+          </div>
+          <div
+            class="rc-dialog-body custom-body"
+          />
+          <div
+            class="rc-dialog-footer custom-footer"
+          >
+            Footer
           </div>
-        </div>
-        <div
-          class="rc-dialog-body custom-body"
-        />
-        <div
-          class="rc-dialog-footer custom-footer"
-        >
-          Footer
         </div>
       </div>
       <div
@@ -197,38 +212,43 @@ exports[`dialog should support styles 1`] = `
         tabindex="0"
       />
       <div
-        class="rc-dialog-content"
-        style="background: orange;"
+        style="outline: none;"
+        tabindex="-1"
       >
-        <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;"
+          class="rc-dialog-content"
+          style="background: orange;"
         >
+          <button
+            aria-label="Close"
+            class="rc-dialog-close"
+            type="button"
+          >
+            <span
+              class="rc-dialog-close-x"
+            />
+          </button>
           <div
-            class="rc-dialog-title"
-            id="test-id"
+            class="rc-dialog-header"
+            style="background: red;"
           >
-            Default
+            <div
+              class="rc-dialog-title"
+              id="test-id"
+            >
+              Default
+            </div>
+          </div>
+          <div
+            class="rc-dialog-body"
+            style="background: green;"
+          />
+          <div
+            class="rc-dialog-footer"
+            style="background: blue;"
+          >
+            Footer
           </div>
-        </div>
-        <div
-          class="rc-dialog-body"
-          style="background: green;"
-        />
-        <div
-          class="rc-dialog-footer"
-          style="background: blue;"
-        >
-          Footer
         </div>
       </div>
       <div
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 0eed6d5e..39ee9f17 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -51,7 +51,9 @@ describe('dialog', () => {
     wrapper.update();
 
     expect(wrapper.render()).toMatchSnapshot();
-    expect(spy).toHaveBeenCalledWith(`Warning: wrapStyle is deprecated, please use styles instead.`);
+    expect(spy).toHaveBeenCalledWith(
+      `Warning: wrapStyle is deprecated, please use styles instead.`,
+    );
     expect(wrapper.find('.customize-root-class').length).toBeTruthy();
     expect(wrapper.find('.rc-dialog-wrap').props().style.fontSize).toBe(10);
     expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
@@ -248,16 +250,16 @@ describe('dialog', () => {
   describe('Tab should keep focus in dialog', () => {
     it('basic tabbing', () => {
       const wrapper = mount(<Dialog visible />, { attachTo: document.body });
-      const sentinelEnd = document.querySelectorAll(
-        '.rc-dialog-content + div',
-      )[0] as unknown as HTMLDivElement;
+      const sentinelEnd = document.querySelector(
+        '.rc-dialog > div:last-child',
+      ) as unknown as HTMLDivElement;
       sentinelEnd.focus();
 
       wrapper.find('.rc-dialog-wrap').simulate('keyDown', {
         keyCode: KeyCode.TAB,
       });
 
-      const sentinelStart = document.querySelectorAll('.rc-dialog > div')[0];
+      const sentinelStart = document.querySelector('.rc-dialog > div:first-child');
       expect(document.activeElement).toBe(sentinelStart);
 
       wrapper.unmount();
@@ -266,14 +268,14 @@ describe('dialog', () => {
     it('trap focus after shift-tabbing', () => {
       render(<Dialog visible />);
 
-      document.querySelector<HTMLDivElement>('.rc-dialog > div').focus();
+      document.querySelector<HTMLDivElement>('.rc-dialog > div:first-child')?.focus();
 
-      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
+      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap')!, {
         keyCode: KeyCode.TAB,
         key: 'Tab',
         shiftKey: true,
       });
-      const sentinelEnd = document.querySelector('.rc-dialog-content + div');
+      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
       expect(document.activeElement).toBe(sentinelEnd);
     });
   });
@@ -555,8 +557,8 @@ describe('dialog', () => {
     const wrapper = mount(
       <Dialog
         visible
-        title='Default'
-        footer='Footer'
+        title="Default"
+        footer="Footer"
         classNames={{
           header: 'custom-header',
           body: 'custom-body',
@@ -579,15 +581,14 @@ describe('dialog', () => {
     expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer');
     expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask');
     expect(wrapper.find('.rc-dialog-content').props().className).toContain('custom-content');
-    
   });
 
   it('should support styles', () => {
     const wrapper = mount(
       <Dialog
         visible
-        title='Default'
-        footer='Footer'
+        title="Default"
+        footer="Footer"
         styles={{
           header: { background: 'red' },
           body: { background: 'green' },
@@ -616,11 +617,11 @@ describe('dialog', () => {
     const wrapper = mount(
       <Dialog
         visible
-        title='Default'
-        footer='Footer'
+        title="Default"
+        footer="Footer"
         bodyStyle={{ background: 'green' }}
         maskStyle={{ background: 'yellow' }}
-        wrapClassName='custom-wrapper'
+        wrapClassName="custom-wrapper"
         style={{ width: 600 }}
         height={903}
       />,
@@ -628,8 +629,12 @@ describe('dialog', () => {
     jest.runAllTimers();
     wrapper.update();
 
-    expect(spy).toHaveBeenCalledWith(`Warning: bodyStyle is deprecated, please use styles instead.`);
-    expect(spy).toHaveBeenCalledWith(`Warning: maskStyle is deprecated, please use styles instead.`);
+    expect(spy).toHaveBeenCalledWith(
+      `Warning: bodyStyle is deprecated, please use styles instead.`,
+    );
+    expect(spy).toHaveBeenCalledWith(
+      `Warning: maskStyle is deprecated, please use styles instead.`,
+    );
     expect(spy).toHaveBeenCalledWith(
       `Warning: wrapClassName is deprecated, please use classNames instead.`,
     );