diff --git a/docs/data/base/components/focus-trap/BasicFocusTrap.js b/docs/data/base/components/focus-trap/BasicFocusTrap.js
index bf7d9d31306942..3a0875bc82e94a 100644
--- a/docs/data/base/components/focus-trap/BasicFocusTrap.js
+++ b/docs/data/base/components/focus-trap/BasicFocusTrap.js
@@ -6,7 +6,14 @@ export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/BasicFocusTrap.tsx b/docs/data/base/components/focus-trap/BasicFocusTrap.tsx
index bf7d9d31306942..3a0875bc82e94a 100644
--- a/docs/data/base/components/focus-trap/BasicFocusTrap.tsx
+++ b/docs/data/base/components/focus-trap/BasicFocusTrap.tsx
@@ -6,7 +6,14 @@ export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/DisableEnforceFocus.js b/docs/data/base/components/focus-trap/DisableEnforceFocus.js
index f4988ec6a3cf63..e32294dcbca58c 100644
--- a/docs/data/base/components/focus-trap/DisableEnforceFocus.js
+++ b/docs/data/base/components/focus-trap/DisableEnforceFocus.js
@@ -6,7 +6,14 @@ export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx b/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx
index f4988ec6a3cf63..e32294dcbca58c 100644
--- a/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx
+++ b/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx
@@ -6,7 +6,14 @@ export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/LazyFocusTrap.js b/docs/data/base/components/focus-trap/LazyFocusTrap.js
index 28762edf3ade32..8e7dbb8f9ead47 100644
--- a/docs/data/base/components/focus-trap/LazyFocusTrap.js
+++ b/docs/data/base/components/focus-trap/LazyFocusTrap.js
@@ -6,7 +6,14 @@ export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/LazyFocusTrap.tsx b/docs/data/base/components/focus-trap/LazyFocusTrap.tsx
index 28762edf3ade32..8e7dbb8f9ead47 100644
--- a/docs/data/base/components/focus-trap/LazyFocusTrap.tsx
+++ b/docs/data/base/components/focus-trap/LazyFocusTrap.tsx
@@ -6,7 +6,14 @@ export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/PortalFocusTrap.js b/docs/data/base/components/focus-trap/PortalFocusTrap.js
index 2d2e76e0b24d1d..6ad02fafc3ecc1 100644
--- a/docs/data/base/components/focus-trap/PortalFocusTrap.js
+++ b/docs/data/base/components/focus-trap/PortalFocusTrap.js
@@ -8,7 +8,14 @@ export default function PortalFocusTrap() {
   const [container, setContainer] = React.useState(null);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>
diff --git a/docs/data/base/components/focus-trap/PortalFocusTrap.tsx b/docs/data/base/components/focus-trap/PortalFocusTrap.tsx
index 6cfb13cc50a60f..2e72570e78e034 100644
--- a/docs/data/base/components/focus-trap/PortalFocusTrap.tsx
+++ b/docs/data/base/components/focus-trap/PortalFocusTrap.tsx
@@ -8,7 +8,14 @@ export default function PortalFocusTrap() {
   const [container, setContainer] = React.useState<HTMLElement | null>(null);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>