implement focus trap with focus-trap-react

package.json

@@ -109,6 +109,7 @@
     "eslint-plugin-testing-library": "^5.11.0",
     "eslint-webpack-plugin": "^4.0.1",
     "file-loader": "^6.2.0",
+    "focus-trap-react": "^10.3.1",
     "html-webpack-plugin": "^5.5.1",
     "identity-obj-proxy": "^3.0.0",
     "iframe-phone": "^1.3.1",

src/components/App.css

@@ -3,6 +3,9 @@
   color: rgb(110,109,95);
   text-align: center;
   padding: 10px;
+  &.isActive {
+    background-color: #fee9ff;
+  }
 
   h1 {
     font-size: 12px;

src/components/App.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import FocusTrap from "focus-trap-react";
 import { initializePlugin } from "@concord-consortium/codap-plugin-api";
 import { ReadAloudMenu } from "./readaloud-menu";
 import { ChatInputComponent } from "./chat-input";
@@ -29,9 +30,11 @@ export const App = () => {
   const [chatTranscript, setChatTranscript] = useState<ChatTranscript>({messages: [{speaker: "DAVAI", content: greeting, timestamp: timeStamp()}]});
   const [readAloudEnabled, setReadAloudEnabled] = useState(false);
   const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  const [activeTrap, setActiveTrap] = useState(false);
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
+    setActiveTrap(true);
   }, []);
 
   const handleSetReadAloudEnabled = () => {
@@ -55,19 +58,33 @@ export const App = () => {
   };
 
   return (
-    <div className="App">
-      <h1>
-        DAVAI
-        <span>(Data Analysis through Voice and Artificial Intelligence)</span>
-      </h1>
-      <ChatTranscriptComponent chatTranscript={chatTranscript} />
-      <ChatInputComponent onSubmit={handleChatInputSubmit} />
-      <ReadAloudMenu
-        enabled={readAloudEnabled}
-        onToggle={handleSetReadAloudEnabled}
-        playbackSpeed={playbackSpeed}
-        onPlaybackSpeedSelect={handleSetPlaybackSpeed}
-      />
-    </div>
+    <FocusTrap
+      active={activeTrap}
+      focusTrapOptions={{
+        allowOutsideClick: true,
+        escapeDeactivates: true,
+        onDeactivate: () => setActiveTrap(false),
+        onActivate: () => setActiveTrap(true)
+      }}
+    >
+      <div
+        onFocus={() => setActiveTrap(true)}
+        role="main"
+        className={`App ${activeTrap && "isActive"}`}
+      >
+        <h1>
+          DAVAI
+          <span>(Data Analysis through Voice and Artificial Intelligence)</span>
+        </h1>
+        <ChatTranscriptComponent chatTranscript={chatTranscript} />
+        <ChatInputComponent onSubmit={handleChatInputSubmit} />
+        <ReadAloudMenu
+          enabled={readAloudEnabled}
+          onToggle={handleSetReadAloudEnabled}
+          playbackSpeed={playbackSpeed}
+          onPlaybackSpeedSelect={handleSetPlaybackSpeed}
+        />
+      </div>
+    </FocusTrap>
   );
 };

src/index.tsx

@@ -8,9 +8,5 @@ const container = document.getElementById("app");
 if (container) {
   const root = createRoot(container);
 
-  window.addEventListener("load", () => {
-    window.focus();
-  });
-
   root.render(<App />);
 }