Add documentation

elastic · Jul 5, 2023 · 09d836d · 09d836d
1 parent cab5d55
commit 09d836d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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
@@ -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`
   };