iFrame focus tracking setup rename (#5754)

snowystinger · LFDanLu · web-flow · commit 741fb7e33252 · 2024-01-26T17:14:36.000-08:00
* iFrame focus tracking setup rename

* fix ts

* fix ts

* fix lint

---------

Co-authored-by: Daniel Lu &lt;dl1644@gmail.com&gt;
diff --git a/packages/@react-aria/interactions/src/index.ts b/packages/@react-aria/interactions/src/index.ts
@@ -17,7 +17,7 @@ export {
   isFocusVisible,
   getInteractionModality,
   setInteractionModality,
-  setupFocus,
+  addWindowFocusTracking,
   useInteractionModality,
   useFocusVisible,
   useFocusVisibleListener
diff --git a/packages/@react-aria/interactions/src/useFocusVisible.ts b/packages/@react-aria/interactions/src/useFocusVisible.ts
@@ -37,7 +37,10 @@ export interface FocusVisibleResult {
 
 let currentModality: null | Modality = null;
 let changeHandlers = new Set<Handler>();
-export let hasSetupGlobalListeners = new Map<Window, boolean>(); // We use a map here to support setting event listeners across multiple document objects.
+interface GlobalListenerData {
+  focus: () => void
+}
+export let hasSetupGlobalListeners = new Map<Window, GlobalListenerData>(); // We use a map here to support setting event listeners across multiple document objects.
 let hasEventBeforeFocus = false;
 let hasBlurredWindowRecently = false;
 
@@ -153,45 +156,65 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
 
   // Add unmount handler
   windowObject.addEventListener('beforeunload', () => {
-    documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
-    documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
-    documentObject.removeEventListener('click', handleClickEvent, true);
-    windowObject.removeEventListener('focus', handleFocusEvent, true);
-    windowObject.removeEventListener('blur', handleWindowBlur, false);
-
-    if (typeof PointerEvent !== 'undefined') {
-      documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
-      documentObject.removeEventListener('pointermove', handlePointerEvent, true);
-      documentObject.removeEventListener('pointerup', handlePointerEvent, true);
-    } else {
-      documentObject.removeEventListener('mousedown', handlePointerEvent, true);
-      documentObject.removeEventListener('mousemove', handlePointerEvent, true);
-      documentObject.removeEventListener('mouseup', handlePointerEvent, true);
-    }
-
-    if (hasSetupGlobalListeners.has(windowObject)) {
-      hasSetupGlobalListeners.delete(windowObject);
-    }
+    tearDownWindowFocusTracking(element);
   }, {once: true});
 
-  hasSetupGlobalListeners.set(windowObject, true);
+  hasSetupGlobalListeners.set(windowObject, {focus});
 }
 
-export const setupFocus = (element?: HTMLElement | null) => {
+const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
+  const windowObject = getOwnerWindow(element);
+  const documentObject = getOwnerDocument(element);
+  if (loadListener) {
+    documentObject.removeEventListener('DOMContentLoaded', loadListener);
+  }
+  if (!hasSetupGlobalListeners.has(windowObject)) {
+    return;
+  }
+  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject)!.focus;
+
+  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
+  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
+  documentObject.removeEventListener('click', handleClickEvent, true);
+  windowObject.removeEventListener('focus', handleFocusEvent, true);
+  windowObject.removeEventListener('blur', handleWindowBlur, false);
+
+  if (typeof PointerEvent !== 'undefined') {
+    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
+    documentObject.removeEventListener('pointermove', handlePointerEvent, true);
+    documentObject.removeEventListener('pointerup', handlePointerEvent, true);
+  } else {
+    documentObject.removeEventListener('mousedown', handlePointerEvent, true);
+    documentObject.removeEventListener('mousemove', handlePointerEvent, true);
+    documentObject.removeEventListener('mouseup', handlePointerEvent, true);
+  }
+
+  hasSetupGlobalListeners.delete(windowObject);
+};
+
+/**
+ * Adds a window (ie iframe) to the list of windows that are being tracked for focus visible.
+ * @param element @default document.body - The element provided will be used to get the window to add.
+ */
+export const addWindowFocusTracking = (element?: HTMLElement | null) => {
   const documentObject = getOwnerDocument(element);
+  let loadListener;
   if (documentObject.readyState !== 'loading') {
     setupGlobalFocusEvents(element);
   } else {
-    documentObject.addEventListener('DOMContentLoaded', () =>
-      setupGlobalFocusEvents(element)
-    );
+    loadListener = () => {
+      setupGlobalFocusEvents(element);
+    };
+    documentObject.addEventListener('DOMContentLoaded', loadListener);
   }
+
+  return () => tearDownWindowFocusTracking(element, loadListener);
 };
 
 // Server-side rendering does not have the document object defined
 // eslint-disable-next-line no-restricted-globals
 if (typeof document !== 'undefined') {
-  setupFocus();
+  addWindowFocusTracking();
 }
 
 /**
diff --git a/packages/@react-aria/interactions/test/useFocusVisible.test.js b/packages/@react-aria/interactions/test/useFocusVisible.test.js
@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 import {act, fireEvent, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
+import {addWindowFocusTracking, useFocusVisible, useFocusVisibleListener} from '../';
 import {hasSetupGlobalListeners} from '../src/useFocusVisible';
 import React from 'react';
 import {render as ReactDOMRender} from 'react-dom';
-import {setupFocus, useFocusVisible, useFocusVisibleListener} from '../';
 
 function Example(props) {
   const {isFocusVisible} = useFocusVisible();
-  return <div id={props.id}>example{isFocusVisible && '-focusVisible'}</div>;
+  return <div {...props}>example{isFocusVisible && '-focusVisible'}</div>;
 }
 
 function toggleBrowserTabs() {
@@ -103,7 +103,7 @@ describe('useFocusVisible', function () {
       iframe.contentWindow.document.body.appendChild(iframeRoot);
     });
 
-    afterEach(() => {
+    afterEach(async () => {
       fireEvent(iframe.contentWindow, new Event('beforeunload'));
       iframe.remove();
     });
@@ -120,7 +120,7 @@ describe('useFocusVisible', function () {
       expect(el.textContent).toBe('example');
 
       // Setup focus in iframe
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
       expect(el.textContent).toBe('example');
 
       // Focus in iframe after setupFocus
@@ -129,16 +129,19 @@ describe('useFocusVisible', function () {
     });
 
     it('removes event listeners on beforeunload', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
-      setupFocus(iframeRoot);
+      let tree = render(<Example data-testid="iframe-example" />, iframeRoot);
 
       await waitFor(() => {
-        expect(document.querySelector('iframe').contentWindow.document.body.querySelector('div[id="iframe-example"]')).toBeTruthy();
+        expect(tree.getByTestId('iframe-example')).toBeTruthy();
       });
-      const el = document.querySelector('iframe').contentWindow.document.body.querySelector('div[id="iframe-example"]');
+      const el = tree.getByTestId('iframe-example');
+      // trigger keyboard focus
+      fireEvent.keyDown(el, {key: 'a'});
+      fireEvent.keyUp(el, {key: 'a'});
       expect(el.textContent).toBe('example-focusVisible');
 
       fireEvent.mouseDown(el);
+      fireEvent.mouseUp(el);
       expect(el.textContent).toBe('example');
 
       // Focus events after beforeunload no longer work
@@ -147,14 +150,36 @@ describe('useFocusVisible', function () {
       expect(el.textContent).toBe('example');
     });
 
+    it('removes event listeners using teardown function', async function () {
+      let tree = render(<Example data-testid="iframe-example" />, iframeRoot);
+      let tearDown = addWindowFocusTracking(iframeRoot);
+
+      await waitFor(() => {
+        expect(tree.getByTestId('iframe-example')).toBeTruthy();
+      });
+      const el = tree.getByTestId('iframe-example');
+      // trigger keyboard focus
+      fireEvent.keyDown(el, {key: 'a'});
+      fireEvent.keyUp(el, {key: 'a'});
+      expect(el.textContent).toBe('example-focusVisible');
+
+      fireEvent.mouseDown(el);
+      fireEvent.mouseUp(el);
+      expect(el.textContent).toBe('example');
+
+      tearDown();
+      fireEvent.focus(iframe.contentWindow.document.body);
+      expect(el.textContent).toBe('example');
+    });
+
     it('removes the window object from the hasSetupGlobalListeners object on beforeunload', async function () {
       ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
       expect(hasSetupGlobalListeners.size).toBe(1);
       expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
       expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
 
       // After setup focus
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
       expect(hasSetupGlobalListeners.size).toBe(2);
       expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
       expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeTruthy();
@@ -166,9 +191,27 @@ describe('useFocusVisible', function () {
       expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
     });
 
+    it('removes the window object from the hasSetupGlobalListeners object if we preemptively tear down', async function () {
+      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      expect(hasSetupGlobalListeners.size).toBe(1);
+      expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
+      expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
+
+      // After setup focus
+      let tearDown = addWindowFocusTracking(iframeRoot);
+      expect(hasSetupGlobalListeners.size).toBe(2);
+      expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
+      expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeTruthy();
+
+      tearDown();
+      expect(hasSetupGlobalListeners.size).toBe(1);
+      expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
+      expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
+    });
+
     it('returns positive isFocusVisible result after toggling browser tabs after keyboard navigation', async function () {
       ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
       await waitFor(() => {
@@ -188,7 +231,7 @@ describe('useFocusVisible', function () {
 
     it('returns negative isFocusVisible result after toggling browser tabs without prior keyboard navigation', async function () {
       ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
       await waitFor(() => {
@@ -206,7 +249,7 @@ describe('useFocusVisible', function () {
 
     it('returns positive isFocusVisible result after toggling browser window after keyboard navigation', async function () {
       ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
       await waitFor(() => {
@@ -225,7 +268,7 @@ describe('useFocusVisible', function () {
 
     it('returns negative isFocusVisible result after toggling browser window without prior keyboard navigation', async function () {
       ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
-      setupFocus(iframeRoot);
+      addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
       await waitFor(() => {
