Remove tab focus while closed

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
   "author": "Alem Tuzlak",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "license": "MIT",
   "keywords": [
     "remix",

src/client/RemixDevTools.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RDTContextProvider, RdtClientConfig } from "./context/RDTContext.js";
 import { Tab } from "./tabs/index.js";
 import { useTimelineHandler } from "./hooks/useTimelineHandler.js";
@@ -27,6 +27,17 @@ import { useListenToRouteChange } from "./hooks/detached/useListenToRouteChange.
 import { RdtPlugin } from "../index.js"; 
 import { useHotkeys } from "react-hotkeys-hook";
 
+const recursivelyChangeTabIndex = (node: Element | HTMLElement, remove = true) => {
+  if(remove){
+    node.setAttribute("tabIndex","-1");
+  } else { 
+    node.removeAttribute("tabIndex");
+  }
+  for(const child of node.children) { 
+    recursivelyChangeTabIndex(child, remove);
+  } 
+};
+
 const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useTimelineHandler();
   useResetDetachmentCheck();
@@ -50,7 +61,11 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useHotkeys(settings.openHotkey, () => debounceSetOpen());
   useHotkeys("esc", () =>  isOpen ? debounceSetOpen() : null);
 
-  
+  useEffect(() => {
+    const el = document.getElementById(REMIX_DEV_TOOLS);
+    if(!el) return;
+    recursivelyChangeTabIndex(el , !isOpen); 
+  },[isOpen])  
 
   if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   // If the dev tools are detached, we don't want to render the main panel