# HTML inert property and React fallback

DevFeed: [HTML inert property and React fallback](<https://devfeed.tech/articles/html-inert-property-and-react-fallback-37283.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/html-inert-property/>)

Author: Stanko

Published: 2023-12-21T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [React](<https://devfeed.tech/topics/react.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [component](<https://devfeed.tech/tags/component.md>), [focus](<https://devfeed.tech/tags/focus.md>), [html](<https://devfeed.tech/tags/html.md>), [mutation](<https://devfeed.tech/tags/mutation.md>), [react](<https://devfeed.tech/tags/react.md>), [tabbing](<https://devfeed.tech/tags/tabbing.md>)

## AI overview

This tutorial explains how the HTML inert property disables user interaction, keyboard tabbing, and screen-reader access for an element. It also presents a React fallback that uses tabindex changes and a mutation observer to support older browsers.

## Source excerpt

HTML inert is a relatively new property, but it is supported in all major browsers since April this year. When you set inert on an element, the browser will ignore all user events on it, including tabbing into elements. It will also hide it from screen readers. I like to think of it as a "reversed focus trap". But we can use it to create focus traps for modals by setting inert on the main content. This div has inert property set and if your browser supports it, you won't be able to interact with the button and link below. You can't click meNor me! React fallback component # Before I learned about inert, I built a relatively simple component to achieve the same result. Now I prefer to use the native solution, but on most projects, we still have to support older browsers. My approach is to handle it in the wrapper component, which finds all focusable elements and sets tabindex="-1". After mounting, the mutation observer starts listening and re-sets the tabindex when content is changed. The wrapper itself has aria-hidden="true", which hides it from screen readers. You can try it out on CodePen and see the source code below: const focusableElementsSelector = [ "a[href]", "input", "select", "textarea", "button", "audio[controls]", "video[controls]", "details > summary:first-of-type", "details", "[contenteditable]:not([contenteditable=\"false\"])", "[tabindex]:not([tabindex=\"-1\"])" ].join(", "); const addTabIndex = ($wrapper) => { $wrapper.querySelectorAll(focusableElementsSelector).forEach(($element) => { $element.setAttribute("tabindex", -1); }); }; const removeTabIndex = ($wrapper) => { $wrapper.querySelectorAll(focusableElementsSelector).forEach(($element) => { $element.removeAttribute("tabindex"); }); }; const Inert = ({ enabled, children, ...props }) => { const wrapperRef = useRef(null); const observerRef = useRef( new MutationObserver(() => addTabIndex(wrapper.current)) ); useEffect(() => { if (enabled) { if (wrapperRef.current) { // Add tabindex addTabIndex(wrap