# tabbing Published articles for tabbing. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## HTML inert property and React fallback DevFeed: [HTML inert property and React fallback]() Original publisher: [Read original article]() Author: Stanko Published: 2023-12-21T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [HTML](), [React](), [Web Development]() Tags: [aria](), [browser](), [code](), [component](), [focus](), [html](), [mutation](), [react](), [tabbing]() ### 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 ## Tab Navigation DevFeed: [Tab Navigation]() Original publisher: [Read original article]() Author: Nenad Rakocevic (noreply@blogger.com) Published: 2023-11-22T22:00:00Z Content type: article Language: en Sources: [Red]() Topics: [Red](), [GUI](), [Code]() Tags: [gui](), [implementation](), [keyboard](), [native](), [navigation](), [tabbing](), [windows]() ### AI overview This article introduces tab navigation for Red's native GUI backends. It explains the mixed implementation, automatic forward and backward navigation, focusable flags, TAB-transparent faces, text-area behavior, and manual next/previous navigation overrides. ### Source excerpt We finally got tab navigation implemented! You might think it should have been an easy feature to add, but achieving a consistent and controllable behavior across our different native GUI backends is not that straightforward. So we opted for a mixed implementation with a general high-level navigation layer in Red and left spatial navigation handling to each backend, in order to preserve the native behavior as much as possible. Automatic navigation By default, pressing TAB key will allow you to navigate to all the GUI widgets in a window, capable of acquiring the focus. Once the last widget is reached, the next TAB press will circle back to the first focusable widget. Conversely, back-navigation can be achieved using Shift-TAB key combination, circling from first face to last one. Here is a simple example: view [ text "Name" field focus return text "Surname" field return below check "Single" check "Employed" button "Send" ] Note: check-boxes selection/unselection is done using the Space key (default on Windows). It is possible to make a face "TAB-transparent", so that TAB navigation will skip it in both directions. This is achieved by removing the focusable flag from a navigable face. For example, in the following code, clicking on the "Click me!" button will toggle the button's focusable flag on and off (using set-flag/toggle): view [ text "Name" field focus return text "Surname" field return below check "Single" check "Employed" button "Send" button "Click me!" 100 [ face/text: pick ["TAB ignore" "TAB stop"] to-logic face/flags set-flag/toggle face 'focusable ] ] In case of area face, the default behavior for TAB navigation means that tab characters cannot be input in the area. In such cases, the alternative Ctrl-TAB key combination can be used to input tab characters. In case the focusable flag is removed from an area face, then TAB key will directly produce tab characters. Here is an example: view [ text "Name" field focus return text "Surname" field return below