From 837d332fcf1ef86b656e4bac9cb2acf9fc3b24b2 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 22 Sep 2023 09:55:39 +0100
Subject: [PATCH 01/24] Grouped defences

---
 .../components/ControlPanel/ControlPanel.tsx  | 60 +++++++++++++++----
 .../src/components/DefenceBox/DefenceBox.tsx  |  1 -
 frontend/src/components/ModelBox/ModelBox.tsx |  1 -
 3 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index e38a2ead8..4c12be07b 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -31,26 +31,62 @@ function ControlPanel({
   setEmails: (emails: EmailInfo[]) => void;
   setNumCompletedLevels: (numCompletedLevels: number) => void;
 }) {
+  function getDefencesConfigure() {
+    return defences.filter((defence) => {
+      return ![
+        DEFENCE_TYPES.LLM_EVALUATION,
+        DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
+        DEFENCE_TYPES.SYSTEM_ROLE,
+      ].find((id) => id === defence.id);
+    });
+  }
+
+  function getDefencesModel() {
+    return defences.filter((defence) => {
+      return [
+        DEFENCE_TYPES.LLM_EVALUATION,
+        DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
+        DEFENCE_TYPES.SYSTEM_ROLE,
+      ].find((id) => id === defence.id);
+    });
+  }
+
   return (
     <div id="control-panel">
       <div id="control-strategy">
         {/* hide defence box on levels 1 and 2 */}
         {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
           currentLevel === LEVEL_NAMES.SANDBOX) && (
-          <DefenceBox
-            currentLevel={currentLevel}
-            defences={defences}
-            showConfigurations={
-              // only allow configuration in sandbox
-              currentLevel === LEVEL_NAMES.SANDBOX ? true : false
-            }
-            setDefenceActive={setDefenceActive}
-            setDefenceInactive={setDefenceInactive}
-            setDefenceConfiguration={setDefenceConfiguration}
-          />
+          <div id="control-defence-configuration">
+            <span className="sidebar-header">Defence Configuration</span>
+            <DefenceBox
+              currentLevel={currentLevel}
+              defences={getDefencesConfigure()}
+              showConfigurations={
+                // only allow configuration in sandbox
+                currentLevel === LEVEL_NAMES.SANDBOX ? true : false
+              }
+              setDefenceActive={setDefenceActive}
+              setDefenceInactive={setDefenceInactive}
+              setDefenceConfiguration={setDefenceConfiguration}
+            />
+          </div>
         )}
         {/* only show model selection box in sandbox mode */}
-        {currentLevel === LEVEL_NAMES.SANDBOX && <ModelBox />}
+        {currentLevel === LEVEL_NAMES.SANDBOX && (
+          <div id="control-model-configuration">
+            <span className="sidebar-header">Model configuration</span>
+            <DefenceBox
+              currentLevel={currentLevel}
+              defences={getDefencesModel()}
+              showConfigurations={true}
+              setDefenceActive={setDefenceActive}
+              setDefenceInactive={setDefenceInactive}
+              setDefenceConfiguration={setDefenceConfiguration}
+            />
+            <ModelBox />
+          </div>
+        )}
         {/* only show document viewer button in sandbox mode */}
         {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
       </div>
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
index 3a9c8f343..cb98d90e9 100644
--- a/frontend/src/components/DefenceBox/DefenceBox.tsx
+++ b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -25,7 +25,6 @@ function DefenceBox({
 }) {
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">Defences</div>
       {defences.map((defence, index) => {
         return (
           <DefenceMechanism
diff --git a/frontend/src/components/ModelBox/ModelBox.tsx b/frontend/src/components/ModelBox/ModelBox.tsx
index 6f7d4f8b4..8aab9acbe 100644
--- a/frontend/src/components/ModelBox/ModelBox.tsx
+++ b/frontend/src/components/ModelBox/ModelBox.tsx
@@ -5,7 +5,6 @@ import ModelConfiguration from "./ModelConfiguration";
 function ModelBox() {
   return (
     <div className="model-box">
-      <div className="side-bar-header">Model</div>
       <ModelSelection />
       <ModelConfiguration />
     </div>

From 09e4b7ff4081773acc537d60f76734e7d5764432 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 22 Sep 2023 10:30:15 +0100
Subject: [PATCH 02/24] Better html grouping

---
 .../components/ControlPanel/ControlPanel.tsx  | 56 +++++++++++--------
 .../DefenceBox/DefenceMechanism.css           |  8 +--
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index 4c12be07b..783e6dbe2 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -57,34 +57,42 @@ function ControlPanel({
         {/* hide defence box on levels 1 and 2 */}
         {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
           currentLevel === LEVEL_NAMES.SANDBOX) && (
-          <div id="control-defence-configuration">
-            <span className="sidebar-header">Defence Configuration</span>
-            <DefenceBox
-              currentLevel={currentLevel}
-              defences={getDefencesConfigure()}
-              showConfigurations={
-                // only allow configuration in sandbox
-                currentLevel === LEVEL_NAMES.SANDBOX ? true : false
-              }
-              setDefenceActive={setDefenceActive}
-              setDefenceInactive={setDefenceInactive}
-              setDefenceConfiguration={setDefenceConfiguration}
-            />
+          <div className="control-collapsible-section">
+            <div className="control-collapsible-section-header">
+              Defence Configuration
+            </div>
+            <div className="control-collapsible-section-body">
+              <DefenceBox
+                currentLevel={currentLevel}
+                defences={getDefencesConfigure()}
+                showConfigurations={
+                  // only allow configuration in sandbox
+                  currentLevel === LEVEL_NAMES.SANDBOX ? true : false
+                }
+                setDefenceActive={setDefenceActive}
+                setDefenceInactive={setDefenceInactive}
+                setDefenceConfiguration={setDefenceConfiguration}
+              />
+            </div>
           </div>
         )}
         {/* only show model selection box in sandbox mode */}
         {currentLevel === LEVEL_NAMES.SANDBOX && (
-          <div id="control-model-configuration">
-            <span className="sidebar-header">Model configuration</span>
-            <DefenceBox
-              currentLevel={currentLevel}
-              defences={getDefencesModel()}
-              showConfigurations={true}
-              setDefenceActive={setDefenceActive}
-              setDefenceInactive={setDefenceInactive}
-              setDefenceConfiguration={setDefenceConfiguration}
-            />
-            <ModelBox />
+          <div className="control-collapsible-section">
+            <div className="control-collapsible-section-header">
+              Model Configuration
+            </div>
+            <div className="control-collapsible-section-body">
+              <DefenceBox
+                currentLevel={currentLevel}
+                defences={getDefencesModel()}
+                showConfigurations={true}
+                setDefenceActive={setDefenceActive}
+                setDefenceInactive={setDefenceInactive}
+                setDefenceConfiguration={setDefenceConfiguration}
+              />
+              <ModelBox />
+            </div>
           </div>
         )}
         {/* only show document viewer button in sandbox mode */}
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 50e4fe9e1..c51cb6949 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -13,6 +13,10 @@
   font-weight: 600;
 }
 
+/*
+ * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
 /* The switch - the box around the slider */
 .switch {
   position: relative;
@@ -65,10 +69,6 @@ input:checked + .slider:before {
   transform: translateX(16px);
 }
 
-/*
- * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
-*/
-
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;

From 4912f3eae1f234ff51bbc98641f4ce0aaf2570eb Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 22 Sep 2023 10:32:23 +0100
Subject: [PATCH 03/24] Removed strategy box

---
 .../DefenceBox.css}                           |  2 +-
 .../src/components/DefenceBox/DefenceBox.tsx  |  4 +--
 .../DefenceBox/DefenceMechanism.css           | 33 +++++++++++++++++++
 .../DefenceBox/DefenceMechanism.tsx           |  7 ++--
 .../StrategyBox/StrategyMechanism.css         | 32 ------------------
 5 files changed, 39 insertions(+), 39 deletions(-)
 rename frontend/src/components/{StrategyBox/StrategyBox.css => DefenceBox/DefenceBox.css} (60%)
 delete mode 100644 frontend/src/components/StrategyBox/StrategyMechanism.css

diff --git a/frontend/src/components/StrategyBox/StrategyBox.css b/frontend/src/components/DefenceBox/DefenceBox.css
similarity index 60%
rename from frontend/src/components/StrategyBox/StrategyBox.css
rename to frontend/src/components/DefenceBox/DefenceBox.css
index 4f8b69a80..ca8968e61 100644
--- a/frontend/src/components/StrategyBox/StrategyBox.css
+++ b/frontend/src/components/DefenceBox/DefenceBox.css
@@ -1,3 +1,3 @@
-#strategy-box {
+#defence-box {
   position: relative;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
index cb98d90e9..72791bd24 100644
--- a/frontend/src/components/DefenceBox/DefenceBox.tsx
+++ b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -1,4 +1,4 @@
-import "../StrategyBox/StrategyBox.css";
+import "./DefenceBox.css";
 import DefenceMechanism from "./DefenceMechanism";
 import {
   DEFENCE_TYPES,
@@ -24,7 +24,7 @@ function DefenceBox({
   ) => Promise<boolean>;
 }) {
   return (
-    <div id="strategy-box">
+    <div id="defence-box">
       {defences.map((defence, index) => {
         return (
           <DefenceMechanism
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index c51cb6949..b7d036664 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,3 +1,36 @@
+.defence-mechanism {
+  background-color: var(--main-button-inactive-background-colour);
+  border-color: transparent;
+  border-radius: 8px;
+  border-style: solid;
+  padding: 12px 14px;
+  margin-bottom: 8px;
+  cursor: default;
+}
+
+.defence-mechanism-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.defence-mechanism-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+}
+
+.defence-mechanism-info span {
+  position: relative;
+  bottom: 1px;
+}
+
+.defence-mechanism-info-box {
+  font-size: 14px;
+  margin-top: 4px;
+}
+
 .defence-mechanism-config {
   font-size: 14px;
   margin-top: 4px;
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index cc29e6893..c4ca14e92 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -6,7 +6,6 @@ import {
 } from "../../models/defence";
 import { validateDefence } from "../../service/defenceService";
 import "./DefenceMechanism.css";
-import "../StrategyBox/StrategyMechanism.css";
 import DefenceConfiguration from "./DefenceConfiguration";
 import { TiTick, TiTimes } from "react-icons/ti";
 
@@ -73,10 +72,10 @@ function DefenceMechanism({
   return (
     <span>
       <div
-        className="strategy-mechanism defence-mechanism"
+        className="defence-mechanism defence-mechanism"
         onClick={toggleDefenceInfo}
       >
-        <div className="strategy-mechanism-header">
+        <div className="defence-mechanism-header">
           <span>{defenceDetail.name}</span>
           <label className="switch">
             <input
@@ -90,7 +89,7 @@ function DefenceMechanism({
           </label>
         </div>
         {isInfoBoxVisible ? (
-          <div className="strategy-mechanism-info-box">
+          <div className="defence-mechanism-info-box">
             <div>{defenceDetail.info}</div>
 
             {showConfigurations ? (
diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css
deleted file mode 100644
index 1122d30b5..000000000
--- a/frontend/src/components/StrategyBox/StrategyMechanism.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.strategy-mechanism {
-  background-color: var(--main-button-inactive-background-colour);
-  border-color: transparent;
-  border-radius: 8px;
-  border-style: solid;
-  padding: 12px 14px;
-  margin-bottom: 8px;
-  cursor: default;
-}
-
-.strategy-mechanism-header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.strategy-mechanism-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
-}
-
-.strategy-mechanism-info span {
-  position: relative;
-  bottom: 1px;
-}
-
-.strategy-mechanism-info-box {
-  font-size: 14px;
-  margin-top: 4px;
-}

From 91cde08ca72f58cdd3efd23868bcd26b4085fd23 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 22 Sep 2023 10:59:06 +0100
Subject: [PATCH 04/24] Visually clearer grouping

---
 frontend/src/Theme.css                        |  5 +++
 .../components/ControlPanel/ControlPanel.css  | 24 +++++++++++++-
 .../components/ControlPanel/ControlPanel.tsx  | 33 ++++++++++++++++---
 .../DefenceBox/DefenceMechanism.css           |  5 ---
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index fd4d8a4e4..113284442 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -29,6 +29,11 @@
   --main-toggle-off-colour: #ababab;
   --main-toggle-on-colour: var(--main-accent-colour);
 
+  --control-header-background-colour: var(
+    --main-button-inactive-background-colour
+  );
+  --control-body-background-colour: #3a3a3a;
+
   --overlay-hidden-colour: #0008;
   --overlay-background-colour: #8ad5da;
   --overlay-attack-background-colour: #d6d6ff;
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index bf5196c5f..1ad02c757 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -5,6 +5,28 @@
 }
 
 #control-strategy {
-  padding: 0 30px;
+  padding: 30px;
   overflow-y: auto;
 }
+
+.control-collapsible-section {
+  margin-bottom: 12px;
+}
+
+.control-collapsible-section-header {
+  background-color: var(--control-header-background-colour);
+  padding: 12px 14px;
+  cursor: default;
+}
+
+.control-collapsible-section-body {
+  /* hide this */
+  display: none;
+
+  background-color: var(--control-body-background-colour);
+}
+
+.control-collapsible-section-body-active {
+  /* show this */
+  display: block;
+}
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index 783e6dbe2..78b0ad244 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -51,6 +51,13 @@ function ControlPanel({
     });
   }
 
+  function toggleShowCollapsibleSection(sectionId: string) {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.classList.toggle("control-collapsible-section-body-active");
+    }
+  }
+
   return (
     <div id="control-panel">
       <div id="control-strategy">
@@ -58,10 +65,19 @@ function ControlPanel({
         {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
           currentLevel === LEVEL_NAMES.SANDBOX) && (
           <div className="control-collapsible-section">
-            <div className="control-collapsible-section-header">
+            <div
+              className="control-collapsible-section-header"
+              // toggle show body on click
+              onClick={() => {
+                toggleShowCollapsibleSection("control-defence-configuration");
+              }}
+            >
               Defence Configuration
             </div>
-            <div className="control-collapsible-section-body">
+            <div
+              id="control-defence-configuration"
+              className="control-collapsible-section-body"
+            >
               <DefenceBox
                 currentLevel={currentLevel}
                 defences={getDefencesConfigure()}
@@ -79,10 +95,19 @@ function ControlPanel({
         {/* only show model selection box in sandbox mode */}
         {currentLevel === LEVEL_NAMES.SANDBOX && (
           <div className="control-collapsible-section">
-            <div className="control-collapsible-section-header">
+            <div
+              className="control-collapsible-section-header"
+              // toggle show body on click
+              onClick={() => {
+                toggleShowCollapsibleSection("control-model-configuration");
+              }}
+            >
               Model Configuration
             </div>
-            <div className="control-collapsible-section-body">
+            <div
+              id="control-model-configuration"
+              className="control-collapsible-section-body"
+            >
               <DefenceBox
                 currentLevel={currentLevel}
                 defences={getDefencesModel()}
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index b7d036664..09b4f9cd5 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,10 +1,5 @@
 .defence-mechanism {
-  background-color: var(--main-button-inactive-background-colour);
-  border-color: transparent;
-  border-radius: 8px;
-  border-style: solid;
   padding: 12px 14px;
-  margin-bottom: 8px;
   cursor: default;
 }
 

From 7ec146f747a2ec3e1a56ae46e9ea7c9658740190 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 22 Sep 2023 10:59:54 +0100
Subject: [PATCH 05/24] Rounded corners on control section

---
 frontend/src/components/ControlPanel/ControlPanel.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index 1ad02c757..8994b7b4f 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -11,6 +11,8 @@
 
 .control-collapsible-section {
   margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .control-collapsible-section-header {

From e49f21625e85730873ce5fe174cb86c5a0f79031 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Mon, 25 Sep 2023 11:22:47 +0100
Subject: [PATCH 06/24] Added the package

---
 frontend/.eslintrc.cjs     |    3 +-
 frontend/package-lock.json | 1088 +++++++++++++++++++++++++++++++++++-
 frontend/package.json      |    1 +
 3 files changed, 1065 insertions(+), 27 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index c5347425d..d37489884 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -7,6 +7,7 @@ module.exports = {
     "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:@typescript-eslint/strict-type-checked",
     "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
@@ -14,7 +15,7 @@ module.exports = {
     project: true,
     tsconfigRootDir: __dirname,
   },
-  plugins: ["react-refresh"],
+  plugins: ["react-refresh", "jsx-a11y"],
   rules: {
     "@typescript-eslint/init-declarations": "error",
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 10714b7fc..132322cff 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
         "eslint": "^8.45.0",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
         "prettier": "2.8.8",
@@ -2463,6 +2464,47 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2472,6 +2514,99 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
+      "dev": true
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
+      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
+      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2611,6 +2746,19 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "peer": true
     },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2798,6 +2946,12 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2820,6 +2974,46 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
+      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/dfa": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
@@ -2906,12 +3100,105 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/es-abstract": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
+      "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.1",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.12",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
       "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==",
       "peer": true
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -3023,6 +3310,51 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "aria-query": "^5.1.3",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.6.2",
+        "axobject-query": "^3.1.1",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.3.3",
+        "language-tags": "=1.0.5",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
@@ -3336,6 +3668,15 @@
         "unicode-trie": "^2.0.0"
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3360,8 +3701,34 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "optional": true,
-      "peer": true
+      "devOptional": true
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -3371,6 +3738,37 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3417,6 +3815,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -3437,6 +3850,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3453,8 +3878,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "optional": true,
-      "peer": true,
+      "devOptional": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -3462,6 +3886,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3470,6 +3903,57 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3559,11 +4043,79 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/internal-slot": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
@@ -3577,43 +4129,158 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
       "dev": true,
       "dependencies": {
-        "is-extglob": "^2.1.1"
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
       "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+    "node_modules/is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
       "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.11"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-url": {
@@ -3621,6 +4288,24 @@
       "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
     },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3700,6 +4385,36 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
+      "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==",
+      "dev": true
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "dev": true,
+      "dependencies": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
     "node_modules/legacy-swc-helpers": {
       "name": "@swc/helpers",
       "version": "0.4.14",
@@ -3980,6 +4695,90 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz",
+      "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4377,6 +5176,23 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -4448,6 +5264,24 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4467,6 +5301,20 @@
         }
       ]
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4534,6 +5382,20 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -4560,6 +5422,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -4613,6 +5489,51 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4861,6 +5782,71 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
@@ -4874,6 +5860,21 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/unicode-properties": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
@@ -5143,6 +6144,41 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 77fea3176..951f90243 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "prettier": "2.8.8",

From 2d052fdb9e568a200c7e3712947906994d9f6f1b Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Mon, 25 Sep 2023 11:54:45 +0100
Subject: [PATCH 07/24] Fixed issues in ModelConfigurationSlider

---
 frontend/src/App.css                           | 15 +++++++++++++++
 .../ModelBox/ModelConfigurationSlider.css      |  2 +-
 .../ModelBox/ModelConfigurationSlider.tsx      | 18 +++++++++---------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e221cedaa..edab59b6e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -45,6 +45,21 @@
   white-space: nowrap;
 }
 
+.prompt-injection-min-button {
+  /* remove button styling */
+  background-color: transparent;
+  border: none;
+  color: var(--main-button-inactive-text-colour);
+  padding: 0;
+
+  height: 100%;
+}
+
+.prompt-injection-min-button:hover {
+  /* outline on hover */
+  outline: 1px solid var(--main-border-colour);
+}
+
 .prompt-injection-button:hover:not([disabled]) {
   background-color: var(--main-button-hover-background-colour);
   color: var(--main-button-hover-text-colour);
diff --git a/frontend/src/components/ModelBox/ModelConfigurationSlider.css b/frontend/src/components/ModelBox/ModelConfigurationSlider.css
index a51ea8863..2fe0354df 100644
--- a/frontend/src/components/ModelBox/ModelConfigurationSlider.css
+++ b/frontend/src/components/ModelBox/ModelConfigurationSlider.css
@@ -21,7 +21,6 @@
 .model-config-info {
   display: flex;
   align-items: center;
-  margin-right: 5px;
   margin-bottom: 0px;
 }
 
@@ -34,6 +33,7 @@
   font-size: 21px;
   margin-left: 1rem;
   margin-bottom: 0px;
+  width: 10%;
 }
 
 .model-config-info-text {
diff --git a/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx b/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
index fd74fae9a..af935fe47 100644
--- a/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
+++ b/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
@@ -33,15 +33,15 @@ function ModelConfigurationSlider({
         <div className="model-config-title">
           <p>{config.name}</p>
         </div>
-        <div className="model-config-info-icon">
-          <span
-            onClick={() => {
-              toggleInfo();
-            }}
-          >
-            <AiOutlineInfoCircle />
-          </span>
-        </div>
+        <button
+          className="model-config-info-icon prompt-injection-min-button"
+          title="Click for more info"
+          onClick={() => {
+            toggleInfo();
+          }}
+        >
+          <AiOutlineInfoCircle />
+        </button>
       </div>
       {showInfo && <div className="model-config-info-text">{config.info}</div>}
       <div className="model-config-slider">

From 11486389d155b11de1c6b701e690bc2c9c6cc4bf Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 09:57:10 +0100
Subject: [PATCH 08/24] Fixed issues in MainHeader

---
 frontend/src/App.css                                 | 6 +++++-
 frontend/src/Theme.css                               | 1 +
 frontend/src/components/MainComponent/MainHeader.css | 3 ++-
 frontend/src/components/MainComponent/MainHeader.tsx | 9 +++++++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index edab59b6e..eb0b985bc 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -53,11 +53,15 @@
   padding: 0;
 
   height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .prompt-injection-min-button:hover {
   /* outline on hover */
-  outline: 1px solid var(--main-border-colour);
+  outline: 1px solid var(--main-button-hover-border-colour);
 }
 
 .prompt-injection-button:hover:not([disabled]) {
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index fd4d8a4e4..a0f739867 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -17,6 +17,7 @@
   --main-button-inactive-text-colour: var(--main-text-colour);
   --main-button-hover-background-colour: #555555;
   --main-button-hover-text-colour: var(--main-text-colour);
+  --main-button-hover-border-colour: white;
 
   --main-input-active-background-colour: var(
     --main-button-inactive-background-colour
diff --git a/frontend/src/components/MainComponent/MainHeader.css b/frontend/src/components/MainComponent/MainHeader.css
index 12900bf6d..b615e9193 100644
--- a/frontend/src/components/MainComponent/MainHeader.css
+++ b/frontend/src/components/MainComponent/MainHeader.css
@@ -50,5 +50,6 @@
 
 #handbook-icon {
   height: 50%;
-  padding-left: 4%;
+  margin-left: 4%;
+  width: 10%;
 }
diff --git a/frontend/src/components/MainComponent/MainHeader.tsx b/frontend/src/components/MainComponent/MainHeader.tsx
index bc2d5be3d..50a6eb27a 100644
--- a/frontend/src/components/MainComponent/MainHeader.tsx
+++ b/frontend/src/components/MainComponent/MainHeader.tsx
@@ -43,9 +43,14 @@ function MainHeader({
             setNewLevel={setNewLevel}
           />
         </span>
-        <span id="handbook-icon" onClick={openHandbook}>
+        <button
+          id="handbook-icon"
+          className="prompt-injection-min-button"
+          title="Click to open the handbook"
+          onClick={openHandbook}
+        >
           <HandbookIcon />
-        </span>
+        </button>
       </span>
     </div>
   );

From feafaf74926cebd72d0af3d71dc98c3b880e4d24 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 11:21:39 +0100
Subject: [PATCH 09/24] Fixed issues in DocumentViewBox

---
 frontend/src/components/DocumentViewer/DocumentViewBox.css | 5 +++++
 frontend/src/components/DocumentViewer/DocumentViewBox.tsx | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css
index 0b2cd6af7..28684d22b 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.css
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css
@@ -30,12 +30,17 @@
   float: right;
   font-size: 28px;
   font-weight: bold;
+  outline: none;
+
+  max-width: 40px;
 }
 
 .document-popup-inner .close-button:hover {
   color: var(--main-button-hover-text-colour);
   text-decoration: none;
   cursor: pointer;
+  /* no outline as x is highlighted on hover */
+  outline: none;
 }
 
 .view-documents-header {
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
index df6103335..1024d2752 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -27,14 +27,14 @@ function DocumentViewBox({
   return show ? (
     <div className="document-popup">
       <div className="document-popup-inner">
-        <span
-          className="close-button"
+        <button
+          className="prompt-injection-min-button close-button"
           onClick={() => {
             setShow(false);
           }}
         >
           x
-        </span>
+        </button>
         <div className="content">
           <div className="view-documents-header">
             <h3>view documents</h3>

From 8823458df53401525ce1f37985e7adb8f5a9ac0b Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 11:24:40 +0100
Subject: [PATCH 10/24] Removed autofocus for accessibility considerations

---
 frontend/src/components/ChatBox/ChatBox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 3042a681d..9a373af09 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -226,7 +226,6 @@ function ChatBox({
             id="chat-box-input"
             className="prompt-injection-input"
             placeholder="Type here..."
-            autoFocus
             rows={1}
             onChange={inputChange}
             onKeyDown={inputKeyDown}

From 0e3b1916a2bd8762dfdfc3a94c5efb430bbf2d02 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 11:25:53 +0100
Subject: [PATCH 11/24] Fixed issues in ApiKeyBox

---
 frontend/src/components/ApiKeyBox/ApiKeyBox.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ApiKeyBox/ApiKeyBox.tsx b/frontend/src/components/ApiKeyBox/ApiKeyBox.tsx
index ece5aaf43..2d455ef18 100644
--- a/frontend/src/components/ApiKeyBox/ApiKeyBox.tsx
+++ b/frontend/src/components/ApiKeyBox/ApiKeyBox.tsx
@@ -71,9 +71,13 @@ function ApiKeyBox() {
         onChange={handleApiKeyChange}
         onKeyUp={(event) => void handleApiKeySubmit(event)}
       />
-      <span id="viewKey" onClick={toggleDisplayKey}>
+      <button
+        id="viewKey"
+        className="prompt-injection-min-button"
+        onClick={toggleDisplayKey}
+      >
         {keyDisplayed ? <BiHide /> : <BiShowAlt />}
-      </span>
+      </button>
 
       <div className="status-text">
         {isValidated &&

From 3af6d67379fb37899b25246209e64f4002ae002d Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 14:14:48 +0100
Subject: [PATCH 12/24] Using some rather than find

---
 frontend/src/components/ControlPanel/ControlPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index 78b0ad244..163830e17 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -37,7 +37,7 @@ function ControlPanel({
         DEFENCE_TYPES.LLM_EVALUATION,
         DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
         DEFENCE_TYPES.SYSTEM_ROLE,
-      ].find((id) => id === defence.id);
+      ].some((id) => id === defence.id);
     });
   }
 
@@ -47,7 +47,7 @@ function ControlPanel({
         DEFENCE_TYPES.LLM_EVALUATION,
         DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
         DEFENCE_TYPES.SYSTEM_ROLE,
-      ].find((id) => id === defence.id);
+      ].some((id) => id === defence.id);
     });
   }
 

From 9c863361cd2ee52d3873dc63493c6dafd9c6cbee Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 14:32:04 +0100
Subject: [PATCH 13/24] Using details html elements

For the collapsible sections in the control panel
---
 .../components/ControlPanel/ControlPanel.css  |  8 -----
 .../components/ControlPanel/ControlPanel.tsx  | 35 +++++--------------
 2 files changed, 8 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index 8994b7b4f..5803bf488 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -22,13 +22,5 @@
 }
 
 .control-collapsible-section-body {
-  /* hide this */
-  display: none;
-
   background-color: var(--control-body-background-colour);
 }
-
-.control-collapsible-section-body-active {
-  /* show this */
-  display: block;
-}
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index 163830e17..2318a3c02 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -51,29 +51,16 @@ function ControlPanel({
     });
   }
 
-  function toggleShowCollapsibleSection(sectionId: string) {
-    const section = document.getElementById(sectionId);
-    if (section) {
-      section.classList.toggle("control-collapsible-section-body-active");
-    }
-  }
-
   return (
     <div id="control-panel">
       <div id="control-strategy">
         {/* hide defence box on levels 1 and 2 */}
         {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
           currentLevel === LEVEL_NAMES.SANDBOX) && (
-          <div className="control-collapsible-section">
-            <div
-              className="control-collapsible-section-header"
-              // toggle show body on click
-              onClick={() => {
-                toggleShowCollapsibleSection("control-defence-configuration");
-              }}
-            >
+          <details className="control-collapsible-section">
+            <summary className="control-collapsible-section-header">
               Defence Configuration
-            </div>
+            </summary>
             <div
               id="control-defence-configuration"
               className="control-collapsible-section-body"
@@ -90,20 +77,14 @@ function ControlPanel({
                 setDefenceConfiguration={setDefenceConfiguration}
               />
             </div>
-          </div>
+          </details>
         )}
         {/* only show model selection box in sandbox mode */}
         {currentLevel === LEVEL_NAMES.SANDBOX && (
-          <div className="control-collapsible-section">
-            <div
-              className="control-collapsible-section-header"
-              // toggle show body on click
-              onClick={() => {
-                toggleShowCollapsibleSection("control-model-configuration");
-              }}
-            >
+          <details className="control-collapsible-section">
+            <summary className="control-collapsible-section-header">
               Model Configuration
-            </div>
+            </summary>
             <div
               id="control-model-configuration"
               className="control-collapsible-section-body"
@@ -118,7 +99,7 @@ function ControlPanel({
               />
               <ModelBox />
             </div>
-          </div>
+          </details>
         )}
         {/* only show document viewer button in sandbox mode */}
         {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}

From fd6e601f5f6c4d6e7e3d457b6a01337ec45c4566 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 26 Sep 2023 14:40:44 +0100
Subject: [PATCH 14/24] Better html DRY principles

---
 .../components/ControlPanel/ControlPanel.css  | 12 +--
 .../components/ControlPanel/ControlPanel.tsx  | 90 ++++++++----------
 .../DefenceBox/DefenceMechanism.css           | 34 ++-----
 .../DefenceBox/DefenceMechanism.tsx           | 93 ++++++++-----------
 4 files changed, 91 insertions(+), 138 deletions(-)

diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index 5803bf488..24effdda9 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -1,15 +1,11 @@
 #control-panel {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-}
-
-#control-strategy {
-  padding: 30px;
   overflow-y: auto;
+  padding: 30px;
 }
 
 .control-collapsible-section {
+  background-color: var(--control-body-background-colour);
   margin-bottom: 12px;
   border-radius: 8px;
   overflow: hidden;
@@ -20,7 +16,3 @@
   padding: 12px 14px;
   cursor: default;
 }
-
-.control-collapsible-section-body {
-  background-color: var(--control-body-background-colour);
-}
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index 2318a3c02..43251f553 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -53,57 +53,45 @@ function ControlPanel({
 
   return (
     <div id="control-panel">
-      <div id="control-strategy">
-        {/* hide defence box on levels 1 and 2 */}
-        {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
-          currentLevel === LEVEL_NAMES.SANDBOX) && (
-          <details className="control-collapsible-section">
-            <summary className="control-collapsible-section-header">
-              Defence Configuration
-            </summary>
-            <div
-              id="control-defence-configuration"
-              className="control-collapsible-section-body"
-            >
-              <DefenceBox
-                currentLevel={currentLevel}
-                defences={getDefencesConfigure()}
-                showConfigurations={
-                  // only allow configuration in sandbox
-                  currentLevel === LEVEL_NAMES.SANDBOX ? true : false
-                }
-                setDefenceActive={setDefenceActive}
-                setDefenceInactive={setDefenceInactive}
-                setDefenceConfiguration={setDefenceConfiguration}
-              />
-            </div>
-          </details>
-        )}
-        {/* only show model selection box in sandbox mode */}
-        {currentLevel === LEVEL_NAMES.SANDBOX && (
-          <details className="control-collapsible-section">
-            <summary className="control-collapsible-section-header">
-              Model Configuration
-            </summary>
-            <div
-              id="control-model-configuration"
-              className="control-collapsible-section-body"
-            >
-              <DefenceBox
-                currentLevel={currentLevel}
-                defences={getDefencesModel()}
-                showConfigurations={true}
-                setDefenceActive={setDefenceActive}
-                setDefenceInactive={setDefenceInactive}
-                setDefenceConfiguration={setDefenceConfiguration}
-              />
-              <ModelBox />
-            </div>
-          </details>
-        )}
-        {/* only show document viewer button in sandbox mode */}
-        {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
-      </div>
+      {/* hide defence box on levels 1 and 2 */}
+      {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
+        currentLevel === LEVEL_NAMES.SANDBOX) && (
+        <details className="control-collapsible-section">
+          <summary className="control-collapsible-section-header">
+            Defence Configuration
+          </summary>
+          <DefenceBox
+            currentLevel={currentLevel}
+            defences={getDefencesConfigure()}
+            showConfigurations={
+              // only allow configuration in sandbox
+              currentLevel === LEVEL_NAMES.SANDBOX ? true : false
+            }
+            setDefenceActive={setDefenceActive}
+            setDefenceInactive={setDefenceInactive}
+            setDefenceConfiguration={setDefenceConfiguration}
+          />
+        </details>
+      )}
+      {/* only show model selection box in sandbox mode */}
+      {currentLevel === LEVEL_NAMES.SANDBOX && (
+        <details className="control-collapsible-section">
+          <summary className="control-collapsible-section-header">
+            Model Configuration
+          </summary>
+          <DefenceBox
+            currentLevel={currentLevel}
+            defences={getDefencesModel()}
+            showConfigurations={true}
+            setDefenceActive={setDefenceActive}
+            setDefenceInactive={setDefenceInactive}
+            setDefenceConfiguration={setDefenceConfiguration}
+          />
+          <ModelBox />
+        </details>
+      )}
+      {/* only show document viewer button in sandbox mode */}
+      {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
     </div>
   );
 }
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 09b4f9cd5..08fe046b4 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -3,41 +3,25 @@
   cursor: default;
 }
 
-.defence-mechanism-header {
+.defence-mechanism header {
   display: flex;
   justify-content: space-between;
 }
 
-.defence-mechanism-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
+.defence-mechanism header h4 {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0;
 }
 
-.defence-mechanism-info span {
-  position: relative;
-  bottom: 1px;
-}
-
-.defence-mechanism-info-box {
-  font-size: 14px;
+.defence-mechanism > .info-box {
+  font-size: 0.875rem;
   margin-top: 4px;
 }
 
-.defence-mechanism-config {
-  font-size: 14px;
-  margin-top: 4px;
-}
-
-.defence-mechanism-config-validated {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
 .validation-text {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index c4ca14e92..4a46d479b 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -70,60 +70,49 @@ function DefenceMechanism({
   }
 
   return (
-    <span>
-      <div
-        className="defence-mechanism defence-mechanism"
-        onClick={toggleDefenceInfo}
-      >
-        <div className="defence-mechanism-header">
-          <span>{defenceDetail.name}</span>
-          <label className="switch">
-            <input
-              type="checkbox"
-              placeholder="defence-toggle"
-              onChange={toggleDefence}
-              // set checked if defence is active
-              checked={defenceDetail.isActive}
-            />
-            <span className="slider round"></span>
-          </label>
-        </div>
-        {isInfoBoxVisible ? (
-          <div className="defence-mechanism-info-box">
-            <div>{defenceDetail.info}</div>
+    <article className="defence-mechanism" onClick={toggleDefenceInfo}>
+      <header>
+        <h4>{defenceDetail.name}</h4>
+        <label className="switch">
+          <input
+            type="checkbox"
+            placeholder="defence-toggle"
+            onChange={toggleDefence}
+            // set checked if defence is active
+            checked={defenceDetail.isActive}
+          />
+          <span className="slider round"></span>
+        </label>
+      </header>
+      {isInfoBoxVisible && (
+        <div className="info-box">
+          <p>{defenceDetail.info}</p>
 
-            {showConfigurations ? (
-              <div className="defence-mechanism-config">
-                {defenceDetail.config.map((config) => {
-                  return (
-                    <DefenceConfiguration
-                      key={config.id}
-                      isActive={defenceDetail.isActive}
-                      config={config}
-                      setConfigurationValue={setConfigurationValue}
-                    />
-                  );
-                })}
-              </div>
-            ) : null}
+          {showConfigurations &&
+            defenceDetail.config.map((config) => {
+              return (
+                <DefenceConfiguration
+                  key={config.id}
+                  isActive={defenceDetail.isActive}
+                  config={config}
+                  setConfigurationValue={setConfigurationValue}
+                />
+              );
+            })}
 
-            {isConfigured ? (
-              <div className="defence-mechanism-config-validated">
-                {configValidated ? (
-                  <p className="validation-text">
-                    <TiTick /> defence successfully configured
-                  </p>
-                ) : (
-                  <p className="validation-text">
-                    <TiTimes /> invalid input - configuration failed
-                  </p>
-                )}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    </span>
+          {isConfigured &&
+            (configValidated ? (
+              <p className="validation-text">
+                <TiTick /> defence successfully configured
+              </p>
+            ) : (
+              <p className="validation-text">
+                <TiTimes /> invalid input - configuration failed
+              </p>
+            ))}
+        </div>
+      )}
+    </article>
   );
 }
 

From 42ed1f5666bad2b4d5496bee286b8727bb486520 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Wed, 27 Sep 2023 10:32:43 +0100
Subject: [PATCH 15/24] Fixed issues in DefenceMechanism

---
 .../DefenceBox/DefenceMechanism.css           | 12 +++---
 .../DefenceBox/DefenceMechanism.tsx           | 37 ++++++++-----------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 08fe046b4..c37f7f512 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,14 +1,10 @@
 .defence-mechanism {
+  position: relative;
   padding: 12px 14px;
   cursor: default;
 }
 
-.defence-mechanism header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.defence-mechanism header h4 {
+.defence-mechanism details summary {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
@@ -31,10 +27,12 @@
 
 /* The switch - the box around the slider */
 .switch {
-  position: relative;
+  position: absolute;
   display: inline-block;
   width: 29px;
   height: 13px;
+  right: 16px;
+  top: 15px;
 }
 
 /* Hide default HTML checkbox */
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 4a46d479b..644892424 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -25,14 +25,9 @@ function DefenceMechanism({
     config: DefenceConfig[]
   ) => Promise<boolean>;
 }) {
-  const [isInfoBoxVisible, setIsInfoBoxVisible] = useState<boolean>(false);
   const [isConfigured, setIsConfigured] = useState<boolean>(false);
   const [configValidated, setConfigValidated] = useState<boolean>(true);
 
-  function toggleDefenceInfo() {
-    setIsInfoBoxVisible(!isInfoBoxVisible);
-  }
-
   async function setConfigurationValue(configId: string, value: string) {
     const configName =
       defenceDetail.config.find((config) => config.id === configId)?.name ?? "";
@@ -70,21 +65,19 @@ function DefenceMechanism({
   }
 
   return (
-    <article className="defence-mechanism" onClick={toggleDefenceInfo}>
-      <header>
-        <h4>{defenceDetail.name}</h4>
-        <label className="switch">
-          <input
-            type="checkbox"
-            placeholder="defence-toggle"
-            onChange={toggleDefence}
-            // set checked if defence is active
-            checked={defenceDetail.isActive}
-          />
-          <span className="slider round"></span>
-        </label>
-      </header>
-      {isInfoBoxVisible && (
+    <div className="defence-mechanism">
+      <label className="switch">
+        <input
+          type="checkbox"
+          placeholder="defence-toggle"
+          onChange={toggleDefence}
+          // set checked if defence is active
+          checked={defenceDetail.isActive}
+        />
+        <span className="slider round"></span>
+      </label>
+      <details>
+        <summary>{defenceDetail.name}</summary>
         <div className="info-box">
           <p>{defenceDetail.info}</p>
 
@@ -111,8 +104,8 @@ function DefenceMechanism({
               </p>
             ))}
         </div>
-      )}
-    </article>
+      </details>
+    </div>
   );
 }
 

From 7f3728c612d69ab6bb8492aa2084aff6665fe736 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Wed, 27 Sep 2023 14:32:26 +0100
Subject: [PATCH 16/24] Accessible overlay

---
 .../HandbookOverlay/HandbookOverlay.css       | 22 +++++++++++++++++++
 .../HandbookOverlay/HandbookOverlay.tsx       | 17 ++++++++------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
index 0e3cfb647..b6d1afbd8 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -14,6 +14,8 @@
 }
 
 #handbook-overlay {
+  position: relative;
+
   background-color: var(--overlay-background-colour);
   color: var(--overlay-text-colour);
 
@@ -27,6 +29,26 @@
   border-radius: 10px;
 }
 
+#handbook-overlay > #close-button {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  max-width: 20px;
+  max-height: 20px;
+
+  color: inherit;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+#handbook-overlay > #close-button:hover {
+  color: var(--main-button-hover-text-colour);
+  text-decoration: none;
+  cursor: pointer;
+  /* no outline as x is highlighted on hover */
+  outline: none;
+}
+
 #handbook-overlay-content {
   height: 100%;
   padding: 0 5%;
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index d676da910..6695032a9 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { LEVEL_NAMES } from "../../models/level";
 import { OVERLAY_TYPE } from "../../models/overlay";
 import HandbookAttacks from "./HandbookAttacks";
@@ -24,13 +25,15 @@ function HandbookOverlay({
   }
 
   return (
-    <div id="handbook-overlay-screen" onClick={closeOverlay}>
-      <div
-        id="handbook-overlay"
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
-      >
+    <div id="handbook-overlay-screen">
+      <div id="handbook-overlay">
+        <button
+          id="close-button"
+          className="prompt-injection-min-button"
+          onClick={closeOverlay}
+        >
+          x
+        </button>
         <div id="handbook-overlay-content">{showOverlayByType()}</div>
       </div>
     </div>

From c380ba4744200e0f383544681edbbaf0579c7635 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Wed, 27 Sep 2023 14:37:06 +0100
Subject: [PATCH 17/24] No longer disabling eslint rule for file

---
 frontend/src/components/HandbookOverlay/HandbookOverlay.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index 6695032a9..3a841a8b1 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { LEVEL_NAMES } from "../../models/level";
 import { OVERLAY_TYPE } from "../../models/overlay";
 import HandbookAttacks from "./HandbookAttacks";

From 7d742f3bd2cb844bfc2e57ed062516ea51b0781f Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 15:22:48 +0100
Subject: [PATCH 18/24] Using border rather than outline for button hover

---
 frontend/src/App.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index eb0b985bc..58ec0c513 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -48,7 +48,9 @@
 .prompt-injection-min-button {
   /* remove button styling */
   background-color: transparent;
-  border: none;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
   color: var(--main-button-inactive-text-colour);
   padding: 0;
 
@@ -60,8 +62,7 @@
 }
 
 .prompt-injection-min-button:hover {
-  /* outline on hover */
-  outline: 1px solid var(--main-button-hover-border-colour);
+  border-color: var(--main-button-hover-border-colour);
 }
 
 .prompt-injection-button:hover:not([disabled]) {

From 601a5444a92a250e9227a8c375befa691ff2b3d3 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 15:24:03 +0100
Subject: [PATCH 19/24] Allowing autofocus for chat input

---
 frontend/src/components/ChatBox/ChatBox.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 9a373af09..1f55e5f1b 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -230,6 +230,8 @@ function ChatBox({
             onChange={inputChange}
             onKeyDown={inputKeyDown}
             onKeyUp={inputKeyUp}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
           />
           <button
             id="chat-box-button-send"

From 34b43c4b2feba175091f0d9acfca123c0e93ca12 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 16:06:25 +0100
Subject: [PATCH 20/24] Better overlay close buttons

---
 frontend/src/App.css                                   |  4 +++-
 .../src/components/DocumentViewer/DocumentViewBox.css  |  3 ---
 .../src/components/DocumentViewer/DocumentViewBox.tsx  |  2 +-
 .../src/components/HandbookOverlay/HandbookOverlay.css | 10 +++++-----
 .../src/components/HandbookOverlay/HandbookOverlay.tsx |  2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 58ec0c513..6f6377a12 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -46,7 +46,7 @@
 }
 
 .prompt-injection-min-button {
-  /* remove button styling */
+  /* remove default button styling */
   background-color: transparent;
   border-width: 1px;
   border-style: solid;
@@ -63,6 +63,8 @@
 
 .prompt-injection-min-button:hover {
   border-color: var(--main-button-hover-border-colour);
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .prompt-injection-button:hover:not([disabled]) {
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css
index 198eced80..39bf14b1e 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.css
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css
@@ -30,7 +30,6 @@
   float: right;
   font-size: 1.75rem;
   font-weight: bold;
-  outline: none;
 
   max-width: 40px;
 }
@@ -39,8 +38,6 @@
   color: var(--main-button-hover-text-colour);
   text-decoration: none;
   cursor: pointer;
-  /* no outline as x is highlighted on hover */
-  outline: none;
 }
 
 .view-documents-header {
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
index 1024d2752..d40dee6cd 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -33,7 +33,7 @@ function DocumentViewBox({
             setShow(false);
           }}
         >
-          x
+          X
         </button>
         <div className="content">
           <div className="view-documents-header">
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
index b6d1afbd8..8ae31c2b6 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -33,11 +33,13 @@
   position: absolute;
   right: 16px;
   top: 16px;
-  max-width: 20px;
-  max-height: 20px;
+  max-width: 2rem;
+  max-height: 2rem;
+  min-height: 1.6rem;
+  padding: 5px;
 
   color: inherit;
-  font-size: 2rem;
+  font-size: 1.5rem;
   font-weight: bold;
 }
 
@@ -45,8 +47,6 @@
   color: var(--main-button-hover-text-colour);
   text-decoration: none;
   cursor: pointer;
-  /* no outline as x is highlighted on hover */
-  outline: none;
 }
 
 #handbook-overlay-content {
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index 3a841a8b1..5bf31c71a 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -31,7 +31,7 @@ function HandbookOverlay({
           className="prompt-injection-min-button"
           onClick={closeOverlay}
         >
-          x
+          X
         </button>
         <div id="handbook-overlay-content">{showOverlayByType()}</div>
       </div>

From f8ffa4d75738b013e9833082fb539e380a49be33 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 16:14:18 +0100
Subject: [PATCH 21/24] Aria labels for overlay close buttons

---
 frontend/src/components/DocumentViewer/DocumentViewBox.tsx  | 1 +
 frontend/src/components/HandbookOverlay/HandbookOverlay.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
index d40dee6cd..983b232ce 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -32,6 +32,7 @@ function DocumentViewBox({
           onClick={() => {
             setShow(false);
           }}
+          aria-label="close document viewer"
         >
           X
         </button>
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index 5bf31c71a..85e3b62eb 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -30,6 +30,7 @@ function HandbookOverlay({
           id="close-button"
           className="prompt-injection-min-button"
           onClick={closeOverlay}
+          aria-label="close handbook overlay"
         >
           X
         </button>

From 1caadc9267b663d470ea38c4d798622b65752ce8 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 16:21:17 +0100
Subject: [PATCH 22/24] Using class names for styling in handbook overlay

---
 .../src/components/HandbookOverlay/HandbookOverlay.css | 10 +++++-----
 .../src/components/HandbookOverlay/HandbookOverlay.tsx |  9 ++++-----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
index 8ae31c2b6..967cd0343 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -1,4 +1,4 @@
-#handbook-overlay-screen {
+.handbook-overlay-screen {
   background-color: var(--overlay-hidden-colour);
 
   position: fixed;
@@ -13,7 +13,7 @@
   align-items: center;
 }
 
-#handbook-overlay {
+.handbook-overlay {
   position: relative;
 
   background-color: var(--overlay-background-colour);
@@ -29,7 +29,7 @@
   border-radius: 10px;
 }
 
-#handbook-overlay > #close-button {
+.handbook-overlay > .close-button {
   position: absolute;
   right: 16px;
   top: 16px;
@@ -43,13 +43,13 @@
   font-weight: bold;
 }
 
-#handbook-overlay > #close-button:hover {
+.handbook-overlay > .close-button:hover {
   color: var(--main-button-hover-text-colour);
   text-decoration: none;
   cursor: pointer;
 }
 
-#handbook-overlay-content {
+.handbook-overlay-content {
   height: 100%;
   padding: 0 5%;
 
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index 85e3b62eb..eb87b9844 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -24,17 +24,16 @@ function HandbookOverlay({
   }
 
   return (
-    <div id="handbook-overlay-screen">
-      <div id="handbook-overlay">
+    <div className="handbook-overlay-screen">
+      <div className="handbook-overlay">
         <button
-          id="close-button"
-          className="prompt-injection-min-button"
+          className="prompt-injection-min-button close-button"
           onClick={closeOverlay}
           aria-label="close handbook overlay"
         >
           X
         </button>
-        <div id="handbook-overlay-content">{showOverlayByType()}</div>
+        <div className="handbook-overlay-content">{showOverlayByType()}</div>
       </div>
     </div>
   );

From b8339fc78bfddc5ef66f7518f281f14db3fcbece Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 29 Sep 2023 16:22:16 +0100
Subject: [PATCH 23/24] Handbook icon class name

---
 frontend/src/components/MainComponent/MainHeader.css | 2 +-
 frontend/src/components/MainComponent/MainHeader.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/MainComponent/MainHeader.css b/frontend/src/components/MainComponent/MainHeader.css
index 9a4a19016..c8b6fb0c6 100644
--- a/frontend/src/components/MainComponent/MainHeader.css
+++ b/frontend/src/components/MainComponent/MainHeader.css
@@ -48,7 +48,7 @@
   justify-content: flex-end;
 }
 
-#handbook-icon {
+.handbook-icon {
   height: 50%;
   margin-left: 4%;
   width: 10%;
diff --git a/frontend/src/components/MainComponent/MainHeader.tsx b/frontend/src/components/MainComponent/MainHeader.tsx
index 50a6eb27a..316b826d4 100644
--- a/frontend/src/components/MainComponent/MainHeader.tsx
+++ b/frontend/src/components/MainComponent/MainHeader.tsx
@@ -44,8 +44,7 @@ function MainHeader({
           />
         </span>
         <button
-          id="handbook-icon"
-          className="prompt-injection-min-button"
+          className="prompt-injection-min-button handbook-icon"
           title="Click to open the handbook"
           onClick={openHandbook}
         >

From 97a024027cff63d17d5d1ad33321d9c263122070 Mon Sep 17 00:00:00 2001
From: George Sproston
 <103250539+gsproston-scottlogic@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:06:28 +0100
Subject: [PATCH 24/24] 322 wrap handbook image in a button and give aria label
 (#341)

* aria-labels for handbook and info buttons

* Better label for defence toggle checkbox
---
 .../DefenceBox/DefenceMechanism.tsx           | 21 ++++++++++---------
 .../components/MainComponent/MainHeader.tsx   |  3 ++-
 .../ModelBox/ModelConfigurationSlider.tsx     |  3 ++-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 644892424..9dab0ae7d 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -66,16 +66,6 @@ function DefenceMechanism({
 
   return (
     <div className="defence-mechanism">
-      <label className="switch">
-        <input
-          type="checkbox"
-          placeholder="defence-toggle"
-          onChange={toggleDefence}
-          // set checked if defence is active
-          checked={defenceDetail.isActive}
-        />
-        <span className="slider round"></span>
-      </label>
       <details>
         <summary>{defenceDetail.name}</summary>
         <div className="info-box">
@@ -105,6 +95,17 @@ function DefenceMechanism({
             ))}
         </div>
       </details>
+      <label className="switch">
+        <input
+          type="checkbox"
+          placeholder="defence-toggle"
+          onChange={toggleDefence}
+          // set checked if defence is active
+          checked={defenceDetail.isActive}
+          aria-label="toggle defence"
+        />
+        <span className="slider round"></span>
+      </label>
     </div>
   );
 }
diff --git a/frontend/src/components/MainComponent/MainHeader.tsx b/frontend/src/components/MainComponent/MainHeader.tsx
index 316b826d4..3aec70c08 100644
--- a/frontend/src/components/MainComponent/MainHeader.tsx
+++ b/frontend/src/components/MainComponent/MainHeader.tsx
@@ -45,7 +45,8 @@ function MainHeader({
         </span>
         <button
           className="prompt-injection-min-button handbook-icon"
-          title="Click to open the handbook"
+          title="open the handbook"
+          aria-label="open the handbook"
           onClick={openHandbook}
         >
           <HandbookIcon />
diff --git a/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx b/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
index af935fe47..728391a04 100644
--- a/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
+++ b/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
@@ -35,7 +35,8 @@ function ModelConfigurationSlider({
         </div>
         <button
           className="model-config-info-icon prompt-injection-min-button"
-          title="Click for more info"
+          title="click for more info"
+          aria-label="click for more info"
           onClick={() => {
             toggleInfo();
           }}