Search code examples
javascriptreactjstypescriptmaterial-uiwcag

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


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:

Edit eager-ully-vcfgxq

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.


Solution

  • 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.