From 09d836dab21909e265a88c484876e757be487bc6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 5 Jul 2023 13:32:05 -0700
Subject: [PATCH] Add documentation

---
 .../views/focus_trap/focus_trap_example.js    | 26 ++++++++++++-------
 src/components/focus_trap/focus_trap.tsx      |  1 +
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/focus_trap/focus_trap_example.js b/src-docs/src/views/focus_trap/focus_trap_example.js
index 064eab862388..27d7406e29c2 100644
--- a/src-docs/src/views/focus_trap/focus_trap_example.js
+++ b/src-docs/src/views/focus_trap/focus_trap_example.js
@@ -18,7 +18,7 @@ export const FocusTrapExample = {
         },
       ],
       text: (
-        <React.Fragment>
+        <>
           <p>
             Use <strong>EuiFocusTrap</strong> to prevent keyboard-initiated
             focus from leaving a defined area. Temporary flows and UX escapes
@@ -37,15 +37,21 @@ export const FocusTrapExample = {
             <strong>EuiFocusTrap</strong> will maintain the tab order expected
             by users.
           </p>
-          <p>
-            Use <EuiCode>clickOutsideDisables</EuiCode> to disable the focus
-            trap when the user clicks outside the trap.
-          </p>
-          <p>
-            Use <EuiCode>noIsolation=false</EuiCode> when pointer events on
-            outside elements should be disallowed.
-          </p>
-        </React.Fragment>
+          <ul>
+            <li>
+              Use <EuiCode>clickOutsideDisables</EuiCode> to disable the focus
+              trap when the user clicks outside the trap.
+            </li>
+            <li>
+              Use <EuiCode>noIsolation=false</EuiCode> when pointer events on
+              outside elements should be disallowed.
+            </li>
+            <li>
+              Use <EuiCode>crossFrame=true</EuiCode> when focus should not be
+              allowed on other iframes on the page.
+            </li>
+          </ul>
+        </>
       ),
       props: { EuiFocusTrap },
       demo: <FocusTrap />,
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index d092f99cbc83..337ea03938f5 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -56,6 +56,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     returnFocus: true,
     noIsolation: true,
     scrollLock: false,
+    crossFrame: false,
     gapMode: 'padding', // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
   };