[docs] Revert to (improved) focusable container

mui · Apr 24, 2020 · 9bbd0bc · 9bbd0bc
1 parent 194b3e9
commit 9bbd0bc
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -62,6 +62,9 @@ const styles = (theme) => ({
     [theme.breakpoints.up('sm')]: {
       borderRadius: theme.shape.borderRadius,
     },
+    '&:focus': {
+      outline: `2px dashed ${theme.palette.text.primary}`,
+    },
   },
   /* Isolate the demo with an outline. */
   demoBgOutlined: {
@@ -125,14 +128,6 @@ const styles = (theme) => ({
     marginTop: -64, // height of toolbar
     position: 'absolute',
   },
-  initialFocus: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: theme.spacing(4),
-    height: theme.spacing(4),
-    pointerEvents: 'none',
-  },
 });
 
 function getDemoName(location) {
@@ -346,12 +341,20 @@ function Demo(props) {
 
   const initialFocusRef = React.useRef(null);
   function handleResetFocusClick() {
-    initialFocusRef.current.focusVisible();
+    initialFocusRef.current.focus();
+  }
+  function handleDemoMouseDown(event) {
+    // Otherwise clicking any non-focusable element in the demo focuses the demo container
+    // which is surprising and not how the code would behave outside of this page
+    event.preventDefault();
   }
 
   return (
     <div className={classes.root}>
+      {/* We're actually preventing interaction here */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
+        aria-label={t('initialFocusLabel')}
         className={clsx(classes.demo, {
           [classes.demoHiddenToolbar]: demoOptions.hideToolbar,
           [classes.demoBgOutlined]: demoOptions.bg === 'outlined',
@@ -360,13 +363,10 @@ function Demo(props) {
         })}
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
+        onMouseDown={handleDemoMouseDown}
+        ref={initialFocusRef}
+        tabIndex={-1}
       >
-        <IconButton
-          aria-label={t('initialFocusLabel')}
-          className={classes.initialFocus}
-          action={initialFocusRef}
-          tabIndex={-1}
-        />
         <DemoSandboxed
           key={demoKey}
           style={demoSandboxedStyle}