Fix FF FocusRing story with iframe (#6001)

* Fix FF FocusRing story with iframe

Author: snowystinger

package.json

@@ -160,6 +160,7 @@
     "react": "^18.0.0",
     "react-axe": "^3.0.2",
     "react-dom": "^18.0.0",
+    "react-frame-component": "^5.0.0",
     "react-test-renderer": "^16.9.0",
     "recast": "^0.20",
     "recursive-readdir": "^2.2.2",

packages/@react-aria/interactions/stories/useFocusRing.stories.tsx

@@ -12,10 +12,10 @@
 
 import {addWindowFocusTracking} from '../src';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
+import Frame from 'react-frame-component';
 import {Key} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import React, {useEffect, useRef, useState} from 'react';
-import ReactDOM from 'react-dom';
 import {SearchField} from '@react-spectrum/searchfield';
 import {useButton} from '@react-aria/button';
 import {useFocusRing} from '@react-aria/focus';
@@ -100,50 +100,34 @@ function SearchExample() {
   );
 }
 
-function Button() {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
+function MyButton(props) {
+  const buttonRef = props.btnRef;
 
-  const {buttonProps} = useButton({}, buttonRef);
   const {focusProps, isFocusVisible, isFocused} = useFocusRing();
+  let {buttonProps} = useButton(props, buttonRef);
 
   return (
-    <button ref={buttonRef} {...mergeProps(buttonProps, focusProps)}>
+    <button ref={buttonRef} {...mergeProps(focusProps, buttonProps)}>
       Focus Visible: {isFocusVisible ? 'true' : 'false'} <br />
       Focused: {isFocused ? 'true' : 'false'}
     </button>
   );
 }
 
-const IframeWrapper = ({children}) => {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-
+const IFrameExample = (props) => {
+  let btnRef = useRef(null);
   useEffect(() => {
-    if (iframeRef.current) {
-      const main = document.createElement('main');
-      const iframeDocument = iframeRef.current.contentDocument;
-
-      if (iframeDocument) {
-        iframeDocument.body.innerHTML = '';
-        iframeDocument.body.appendChild(main);
-        ReactDOM.render(children, main);
-
-        return addWindowFocusTracking(iframeDocument.body);
-      }
-    }
-  }, [children]);
+    return addWindowFocusTracking(btnRef.current);
+  }, []);
 
-  return <iframe title="test" ref={iframeRef} />;
-};
-
-function IFrameExample() {
   return (
     <>
-      <Button />
-      <IframeWrapper>
-        <Button />
-        <Button />
-        <Button />
-      </IframeWrapper>
+      <MyButton />
+      <Frame {...props}>
+        <MyButton btnRef={btnRef} />
+        <MyButton />
+        <MyButton />
+      </Frame>
     </>
   );
-}
+};

yarn.lock

@@ -21088,6 +21088,11 @@ react-error-overlay@6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-frame-component@^5.0.0:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.6.tgz#0d9991d251ff1f7177479d8f370deea06b824b79"
+  integrity sha512-CwkEM5VSt6nFwZ1Op8hi3JB5rPseZlmnp5CGiismVTauE6S4Jsc4TNMlT0O7Cts4WgIC3ZBAQ2p1Mm9XgLbj+w==
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"