[docs] Revert to (improved) focusable container

Author: eps1lon

docs/src/modules/components/Demo.js

@@ -62,6 +62,9 @@ const styles = (theme) => ({
     [theme.breakpoints.up('sm')]: {
       borderRadius: theme.shape.borderRadius,
     },
+    '&:focus': {
+      outline: `2px sollid ${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}