Make overlay and handbook accessible

ScottLogic · Oct 13, 2023 · dd62df7 · dd62df7
1 parent 2be6388
commit dd62df7
Show file tree

Hide file tree

Showing 20 changed files with 142 additions and 207 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -40,9 +40,6 @@
   border: 1px solid transparent;
   color: var(--main-button-inactive-text-colour);
   padding: 0;
-
-  height: 100%;
-
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -25,21 +25,26 @@ import { getCompletedLevels } from "./service/levelService";
 import Overlay from "./components/Overlay/Overlay";
 import { OVERLAY_TYPE } from "./models/overlay";
 
+/*
+TODO
+- Add click handler
+- Manually test!
+*/
+
 function App({ isNewUser }: { isNewUser: boolean }) {
   const [MainBodyKey, setMainBodyKey] = useState<number>(0);
   const [currentLevel, setCurrentLevel] = useState<LEVEL_NAMES>(
     loadCurrentLevel()
   );
   const [numCompletedLevels, setNumCompletedLevels] = useState<number>(0);
 
-  const [showOverlay, setShowOverlay] = useState<boolean>(isNewUser);
-
   const [defencesToShow, setDefencesToShow] =
     useState<DefenceInfo[]>(DEFENCE_DETAILS_ALL);
 
   const [emails, setEmails] = useState<EmailInfo[]>([]);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
+  const [showOverlay, setShowOverlay] = useState<boolean>(isNewUser);
   const [overlayType, setOverlayType] = useState<OVERLAY_TYPE>(
     OVERLAY_TYPE.WELCOME
   );

diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -40,9 +40,8 @@
   );
   --control-body-background-colour: #3a3a3a;
 
-  --overlay-hidden-colour: #0008;
   --overlay-background-colour: #8ad5da;
-  --overlay-closed-tab-colour: #c7e8f4;
+  --overlay-tab-colour: #c7e8f4;
   --overlay-attack-background-colour: #d6d6ff;
   --overlay-text-colour: #313131;
 
@@ -66,3 +65,7 @@
   --email-divider-colour: var(--email-text-colour);
   --email-text-colour: #000;
 }
+
+::backdrop {
+  --overlay-hidden-colour: #0008;
+}
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css
@@ -27,11 +27,12 @@
 
 .document-popup-inner .close-button {
   color: var(--main-accent-colour);
-  float: right;
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  padding: 0.25rem 0.75rem;
   font-size: 1.75rem;
   font-weight: bold;
-
-  max-width: 40px;
 }
 
 .document-popup-inner .close-button:hover {

diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
+import { RemoteDocument } from "../../models/document";
 import { getDocumentUris } from "../../service/documentService";
 
 import "./DocumentViewBox.css";
-import { RemoteDocument } from "../../models/document";
 
 function DocumentViewBox({
   show,

diff --git a/frontend/src/components/ExportChat/ExportPDFLink.css b/frontend/src/components/ExportChat/ExportPDFLink.css
@@ -1,11 +1,4 @@
-#export-chat-box a {
+.export-chat-link {
   color: var(--main-button-inactive-text-colour);
   text-decoration: none;
-  /* fill the entire space */
-  height: 100%;
-  width: 100%;
-  /* vertically centre text */
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.tsx b/frontend/src/components/ExportChat/ExportPDFLink.tsx
@@ -1,10 +1,10 @@
-import ExportContent from "./ExportContent";
+import { PDFDownloadLink } from "@react-pdf/renderer";
 import { ChatMessage } from "../../models/chat";
 import { EmailInfo } from "../../models/email";
-import { PDFDownloadLink } from "@react-pdf/renderer";
+import { LEVEL_NAMES } from "../../models/level";
+import ExportContent from "./ExportContent";
 
 import "./ExportPDFLink.css";
-import { LEVEL_NAMES } from "../../models/level";
 
 function ExportPDFLink({
   messages,
@@ -33,10 +33,11 @@ function ExportPDFLink({
             currentLevel={currentLevel}
           />
         }
+        className="export-chat-link"
         fileName={getFileName()}
       >
         Export
-      </PDFDownloadLink>{" "}
+      </PDFDownloadLink>
     </div>
   );
 }

diff --git a/frontend/src/components/HandbookOverlay/HandbookAttacks.css b/frontend/src/components/HandbookOverlay/HandbookAttacks.css
@@ -1,12 +1,13 @@
-#handbook-attacks {
+.handbook-attacks {
   display: grid;
+  gap: 1rem 0.5rem;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
-.handbook-attack {
+.handbook-attacks .attack {
   background-color: var(--overlay-attack-background-colour);
-  border-radius: 10px;
-  padding: 0 10px;
-  margin: 5px;
-  font-size: 0.8rem;
+  margin: 0 0.25rem;
+  border-radius: 0.5rem;
+  padding: 0 0.625rem;
+  font-size: 0.875rem;
 }
diff --git a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx
@@ -4,31 +4,19 @@ import { LEVEL_NAMES } from "../../models/level";
 import "./HandbookAttacks.css";
 
 function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
-  function getAttacks(): AttackInfo[] {
-    // what attacks to show depends on the level
-    switch (currentLevel) {
-      case LEVEL_NAMES.LEVEL_1:
-      // fallthrough
-      case LEVEL_NAMES.LEVEL_2:
-        return ATTACKS_LEVEL_2;
-      default:
-        return ATTACKS_ALL;
-    }
-  }
+  const attacks: AttackInfo[] =
+    currentLevel === LEVEL_NAMES.LEVEL_2
+      ? ATTACKS_LEVEL_2
+      : ATTACKS_ALL;
 
   return (
-    <div>
-      <h2>Attacks</h2>
-      <div id="handbook-attacks">
-        {getAttacks().map((attack) => {
-          return (
-            <span className="handbook-attack" key={attack.id}>
-              <h3>{attack.name}</h3>
-              <p>{attack.info}</p>
-            </span>
-          );
-        })}
-      </div>
+    <div className="handbook-attacks">
+      {attacks.map((attack) => (
+        <span className="attack" key={attack.id}>
+          <h3>{attack.name}</h3>
+          <p>{attack.info}</p>
+        </span>
+      ))}
     </div>
   );
 }

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -1,6 +1,12 @@
-#handbook-overlay-content {
+.handbook-overlay {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   height: 100%;
+}
 
+.handbook-overlay .content {
+  flex: 0 1 auto;
   text-align: center;
   overflow-y: auto;
 }
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -3,38 +3,34 @@ import { LEVEL_NAMES } from "../../models/level";
 import MissionInformation from "../Overlay/MissionInformation";
 import HandbookAttacks from "./HandbookAttacks";
 import HandbookOverlayTabs from "./HandbookOverlayTabs";
-import { HANDBOOK_PAGES } from "../../models/handbook";
+import { HANDBOOK_PAGES, handbookPageNames } from "../../models/handbook";
 import "./HandbookOverlay.css";
 
 function HandbookOverlay({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
   const [selectedPage, setSelectedPage] = useState<HANDBOOK_PAGES>(
     HANDBOOK_PAGES.MISSION_INFO
   );
 
-  function setPageContent(handbookPage: HANDBOOK_PAGES) {
-    switch (handbookPage) {
-      case HANDBOOK_PAGES.ATTACKS:
-        return <HandbookAttacks currentLevel={currentLevel} />;
-      case HANDBOOK_PAGES.TOOLS:
-        return (
-          <div>
-            <h2> Placeholder </h2>
-          </div>
-        );
-      case HANDBOOK_PAGES.MISSION_INFO:
-      default:
-        return <MissionInformation currentLevel={currentLevel} />;
-    }
-  }
+  const pageContent =
+    selectedPage === HANDBOOK_PAGES.ATTACKS
+      ? <HandbookAttacks currentLevel={currentLevel} />
+      : selectedPage === HANDBOOK_PAGES.TOOLS
+      ? <div><h2>Placeholder</h2></div>
+      : <MissionInformation currentLevel={currentLevel} />;
 
   return (
     <div className="handbook-overlay">
       <HandbookOverlayTabs
         currentLevel={currentLevel}
-        setSelectedPage={setSelectedPage}
+        currentPage={selectedPage}
+        selectPage={setSelectedPage}
       />
-      <div className="handbook-overlay-content">
-        {setPageContent(selectedPage)}
+      <div
+        className="content"
+        role="tabpanel"
+        aria-label={handbookPageNames[selectedPage]}
+      >
+        {pageContent}
       </div>
     </div>
   );

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.css b/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.css
@@ -1,57 +1,23 @@
 .handbook-tabs {
   display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  position: absolute;
-  top: -50px; /* position above overlay */
-  left: 2rem;
-  z-index: -1;
+  gap: 0.5rem;
 }
 
-.handbook-tabs label {
+.handbook-tabs button {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid var(--overlay-tab-colour);
+  border-radius: 0.5rem;
   padding: 1rem 2rem;
-  margin-right: 0.0625rem;
   cursor: pointer;
-  background-color: var(--overlay-closed-tab-colour);
+  background-color: var(--overlay-background-colour);
+  font-size: 1rem;
   font-weight: 700;
+  line-height: 1;
   transition: ease 0.1s;
-  border-radius: 10px 10px 0 0;
-}
-
-.handbook-tabs label:not(:first-child):not(:last-child) {
-  border-right: 2px solid #000;
 }
 
-.handbook-tabs [type="radio"] {
-  display: none;
-}
-
-.handbook-tabs [type="radio"]:checked + label {
-  background-color: var(--overlay-background-colour);
-}
-
-.handbook-tabs [type="radio"]:checked + label + .tab {
-  display: block;
-}
-
-@media (min-width: 768px) {
-  body {
-    font-size: 1.125rem;
-  }
-
-  .handbook-tabs-container {
-    padding: 4rem 4rem;
-  }
-
-  .handbook-tabs label {
-    order: 1;
-    width: auto;
-  }
-
-  .handbook-tabs .tab {
-    order: 9;
-  }
+.handbook-tabs button[aria-selected=true] {
+  background-color: var(--overlay-tab-colour);
 }
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx
@@ -4,40 +4,36 @@ import "./HandbookOverlayTabs.css";
 
 function HandbookOverlayTabs({
   currentLevel,
-  setSelectedPage,
+  currentPage,
+  selectPage,
 }: {
   currentLevel: LEVEL_NAMES;
-  setSelectedPage: (page: HANDBOOK_PAGES) => void;
+  currentPage: HANDBOOK_PAGES;
+  selectPage: (page: HANDBOOK_PAGES) => void;
 }) {
   // the tabs that are shown depend on the current level
-  function getLevelTabs(currentLevel: LEVEL_NAMES) {
-    switch (currentLevel) {
-      case LEVEL_NAMES.LEVEL_1:
-        return [HANDBOOK_PAGES.MISSION_INFO];
-      default:
-        return [
-          HANDBOOK_PAGES.MISSION_INFO,
-          HANDBOOK_PAGES.ATTACKS,
-          HANDBOOK_PAGES.TOOLS,
-        ];
-    }
-  }
+  const tabs =
+    currentLevel === LEVEL_NAMES.LEVEL_1
+      ? [HANDBOOK_PAGES.MISSION_INFO]
+      : [
+        HANDBOOK_PAGES.MISSION_INFO,
+        HANDBOOK_PAGES.ATTACKS,
+        HANDBOOK_PAGES.TOOLS,
+      ];
 
   return (
-    <div className="handbook-tabs">
-      {getLevelTabs(currentLevel).map((tab) => (
-        <div key={tab}>
-          <input
-            type="radio"
-            name="handbook-tabs"
-            id={tab.toString()}
-            defaultChecked={tab === HANDBOOK_PAGES.MISSION_INFO}
-            onClick={() => {
-              setSelectedPage(tab);
-            }}
-          />
-          <label htmlFor={tab.toString()}>{handbookPageNames[tab]}</label>
-        </div>
+    <div className="handbook-tabs" role="tablist">
+      {tabs.map((page) => (
+        <button
+          key={page}
+          role="tab"
+          aria-selected={page === currentPage}
+          onClick={() => {
+            selectPage(page);
+          }}
+        >
+          {handbookPageNames[page]}
+        </button>
       ))}
     </div>
   );

diff --git a/frontend/src/components/Overlay/MissionInformation.css b/frontend/src/components/Overlay/MissionInformation.css
@@ -1,3 +1,3 @@
-#mission-info p {
+.mission-info p {
   font-size: 1.5rem;
 }