fix(useFocusVisible): use Reflect.defineProperty to wrap HTMLElement.prototype.focus (#10041)

* fix(useFocusVisible): use Object.defineProperty to wrap HTMLElement.prototype.focus

* use Reflect.defineProperty instead of Object.defineProperty

Author: antododo

packages/react-aria/src/interactions/useFocusVisible.ts

@@ -167,11 +167,18 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
   // However, we need to detect other cases when a focus event occurs without
   // a preceding user event (e.g. screen reader focus). Overriding the focus
   // method on HTMLElement.prototype is a bit hacky, but works.
+  // defineProperty (not assignment) so this works even if `focus` is currently
+  // a getter-only accessor — e.g. when @testing-library/user-event's setup()
+  // has instrumented it. Plain assignment throws in that case.
   let focus = windowObject.HTMLElement.prototype.focus;
-  windowObject.HTMLElement.prototype.focus = function () {
-    hasEventBeforeFocus = true;
-    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);
-  };
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, 'focus', {
+    configurable: true,
+    writable: true,
+    value: function () {
+      hasEventBeforeFocus = true;
+      focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);
+    }
+  });
 
   documentObject.addEventListener('keydown', handleKeyboardEvent, true);
   documentObject.addEventListener('keyup', handleKeyboardEvent, true);
@@ -213,7 +220,11 @@ const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
   if (!hasSetupGlobalListeners.has(windowObject)) {
     return;
   }
-  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject)!.focus;
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, 'focus', {
+    configurable: true,
+    writable: true,
+    value: hasSetupGlobalListeners.get(windowObject)!.focus
+  });
 
   documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
   documentObject.removeEventListener('keyup', handleKeyboardEvent, true);

packages/react-aria/test/interactions/useFocusVisible.test.js

@@ -148,6 +148,26 @@ describe('useFocusVisible', function () {
       iframe.remove();
     });
 
+    // Regression test for https://github.com/adobe/react-spectrum/issues/9649
+    it('does not throw when HTMLElement.prototype.focus is an accessor-only property', function () {
+      const HTMLElementProto = iframe.contentWindow.HTMLElement.prototype;
+      const original = Object.getOwnPropertyDescriptor(HTMLElementProto, 'focus');
+      Object.defineProperty(HTMLElementProto, 'focus', {
+        configurable: true,
+        get() {
+          return original?.value;
+        }
+      });
+
+      try {
+        expect(() => addWindowFocusTracking(iframeRoot)).not.toThrow();
+      } finally {
+        if (original) {
+          Object.defineProperty(HTMLElementProto, 'focus', original);
+        }
+      }
+    });
+
     it('sets up focus listener in a different window', async function () {
       render(<Example id="iframe-example" />, {container: iframeRoot});
       await waitFor(() => {