[docs][base-ui] Improve focus trap demo

mui · Sep 15, 2023 · f3a6ed4 · f3a6ed4
1 parent 40aaf7b
commit f3a6ed4
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 8 deletions.
diff --git 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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <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
@@ -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: '2px solid blue' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>