javascript - How to make background components visible but inaccessible when React Material UI Backdrop is opened? - Stack Overf

admin管理员组

文章数量:1323348

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.

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.

• javascript
• reactjs
• typescript
• material-ui
• wcag

Share Improve this question Follow edited Feb 4 at 3:06 hokwanhung asked Jan 9 at 4:50 hokwanhunghokwanhung 64711 gold badge88 silver badges2424 bronze badges 2

• are the buttons clickable tho when backdrop open stackblitz/edit/react-n5jldtnj?file=Demo.tsx (check console logs). is the problem the background is visible. or the backdrop disappears when clicked out – cmgchess Commented Jan 9 at 6:01
• hmm for me the backdrop disappears and button onclick will not trigger when background open – cmgchess Commented Jan 9 at 6:19

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can try using pointer-events: none; style.

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.

本文标签：