title: Prevent background items from receiving focus while using MUI backdrop
body: <p>We're dimming the screen when a (custom, not MUI) dialog is open using <a href="https://mui.com/material-ui/react-backdrop/" rel="nofollow noreferrer">MUI backdrop</a> but the &quot;grayed-out&quot; items are still active and the user can access them using the keyboard.</p>
  <p>In the below picture I'm moving from &quot;show backdrop&quot; to button 2 and then to button 3...</p>
  <p><a href="https://i.stack.imgur.com/QgR2r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QgR2r.png" alt="enter image description here" /></a></p>
  <p>Is there a simple way to avoid keyboard access to the background?</p>
  <p>Code (<a href="https://codesandbox.io/s/focus-with-backdrop-s2qt4l" rel="nofollow noreferrer">sandbox</a>):</p>
  <pre><code>import * as React from 'react';
  import Backdrop from '@mui/material/Backdrop';
  import CircularProgress from '@mui/material/CircularProgress';
  import Button from '@mui/material/Button';
  
  export default function SimpleBackdrop() {
    const [open, setOpen] = React.useState(false);
    const handleClose = () =&gt; {
      setOpen(false);
    };
    const handleToggle = () =&gt; {
      setOpen(!open);
    };
  
    return (
      &lt;div&gt;
        &lt;Button onClick={handleToggle}&gt;Show backdrop&lt;/Button&gt;
        &lt;Button&gt;Button 2&lt;/Button&gt;
        &lt;Button&gt;Button 3&lt;/Button&gt;
        &lt;Button&gt;Button 4&lt;/Button&gt;
        &lt;Backdrop
          sx={{ color: '#fff', zIndex: (theme) =&gt; theme.zIndex.drawer + 1 }}
          open={open}
          onClick={handleClose}
        &gt;
          &lt;CircularProgress color=&quot;inherit&quot; /&gt;
        &lt;/Backdrop&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>