When the Material UI Backdrop
component is in use, the elements in the website are still accessible, for example, through Tab
, which can be fairly easy to see in the official demo, or by using this CodeSandbox
:
I went through certain questions in plain JS
, such as tabindex -1 not working for child elements and How to make a bunch of elements not accessible from keyboard, and many suggested using visibility: hidden
or display: none
. However, I would like to know if there are ways to prevent other components from accessing, but still being visible.
To start with, I use the open
attribute with useState
to indicate whether the elements should be inaccessible.
Two methods can achieve the desired effect: making elements visible but inaccessible through a mouse
or keyboard
.
The simplest way is to use tabIndex="-1"
, and for the
// ...other JS codes
return (
{/* ...other HTML codes */}
<div>
<div>
<button tabIndex={open ? -1 : 0}>Button A</button>
</div>
<div>
<button tabIndex={open ? -1 : 0}>Button B</button>
</div>
<div>
<button tabIndex={open ? -1 : 0}>Button C</button>
</div>
</div>
);
But as mentioned in the question, it is not feasible for many child elements that are separated into different files and components, so I came up with using inert
.
// ...other JS codes
return (
{/* ...other HTML codes */}
<div inert={open}>
<div>
<button>Button A</button>
</div>
<div>
<button>Button B</button>
</div>
<div>
<button>Button C</button>
</div>
</div>
);
And for those who are using React
with TypeScript
, check this question: Error when using `inert` attribute with Typescript.