Merge branch 'feat/export-dir' of https://github.com/GovTechSG/purple…

…-hats-desktop into feat/export-dir
GovTechSG · Jul 11, 2023 · 323bb65 · 323bb65
2 parents c904473 + f115a01
commit 323bb65
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 19 deletions.
diff --git a/src/App.css b/src/App.css
@@ -266,22 +266,25 @@ a:hover {
     visibility: hidden;
   }
 
-  .download-dropdown {
+  .dropdown {
     position: relative;
   }
 
   .user-input-group .download-dropdown {
     width: 77%;
   }
 
-  .download-dropdown-btn {
-    box-sizing: border-box;
+  .dropdown-btn {
     border: 1px solid #B5C5CA;
     border-radius: 4px;
-    width: 100%;
     display: flex;
   }
 
+  .dropdown-list {
+    position: absolute;
+    width: 100%;
+  }
+
   #dir-info {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -290,7 +293,8 @@ a:hover {
     white-space: nowrap;
   }
 
-  .dir-info-button {
+  .dropdown-list-item {
+    list-style: none;
     background-color: white;
     align-items: center;
     justify-content: space-between;
@@ -318,18 +322,18 @@ a:hover {
     color: white;
   }
 
+  .active {
+    background-color: #472BC4;
+    color: white;
+  }
+
   .img-button {
     background-color: transparent;
     border: none;
     margin-right: 5px;
     padding-top: 0px;
   }
 
-  .dir-info {
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-
   @keyframes fade-in {
     from {
       opacity: 0;

diff --git a/src/MainWindow/HomePage/AdvancedScanOptions.jsx b/src/MainWindow/HomePage/AdvancedScanOptions.jsx
@@ -62,6 +62,7 @@ const AdvancedScanOptions = ({
           type="transparent"
           className={"purple-text" + (advancedOptionsDirty ? " bold-text" : "")}
           onClick={handleToggleMenu}
+          aria-expanded={openAdvancedOptionsMenu}
         >
           Advanced scan options{" "}
           {openAdvancedOptionsMenu ? (
@@ -134,7 +135,7 @@ const AdvancedScanOptions = ({
             <label id="download-folder-label" className="bold-text">
               Download:
             </label>
-            <DownloadFolderDropdown></DownloadFolderDropdown>
+            <DownloadFolderDropdown labelledBy={'download-label'}></DownloadFolderDropdown>
           </div>
           <div id="scan-in-background-toggle-group">
             <input

diff --git a/src/MainWindow/ResultPage/index.jsx b/src/MainWindow/ResultPage/index.jsx
@@ -155,7 +155,7 @@ const ResultPage = ({ completedScanId: scanId }) => {
             svgIcon={<CheckCircleIcon />}
           />
           {/* <i className="bi bi-check-circle"></i> */}
-          <h1>Scan completed</h1>
+          <h1 aria-live="polite">Scan completed</h1>
           {enableReportDownload && !event ? (
             <>
               <div id="download-content">

diff --git a/src/MainWindow/ScanningPage/index.jsx b/src/MainWindow/ScanningPage/index.jsx
@@ -5,7 +5,7 @@ const ScanningPage = () => {
   return (
     <div id="scanning-page">
       <LoadingSpinner />
-      <h1>Please wait while we scan your site...</h1>
+      <h1 aria-live="polite">Please wait while we scan your site...</h1>
     </div>
   );
 };

diff --git a/src/common/components/DownloadFolderDropdown.jsx b/src/common/components/DownloadFolderDropdown.jsx
@@ -7,23 +7,114 @@ import { useEffect, useState } from "react";
 import services from "../../services";
 import editIcon from "../../assets/edit-icon.svg";
 
-const DownloadFolderDropdown = () => {
+const DownloadFolderDropdown = ({
+    labelledBy
+}) => {
+    const dropdownOptionActiveClass = "dropdown-list-item active";
+    const dropdownOptionInactiveClass = "dropdown-list-item";
+
+    const [active, setActive] = useState(true); 
     const [exportDir, setExportDir] = useState();
     const [openDropDown, setOpenDropDown] = useState(false);
-
+     
     useEffect(() => {
         const getExportDir = async () => {
             const userData = await services.getUserData();
             setExportDir(userData.exportDir);
         };
-
         getExportDir();
     }, [])
 
+    useEffect(() => {
+        const handleKeyDown = (event) =>  {
+            const dropdownListElement = document.querySelector('.dropdown-list'); 
+            const dropdownOptions = dropdownListElement.querySelectorAll('.dropdown-list-item'); 
+
+            console.log(event.key);
+            console.log(event.target);
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (!dropdownListElement.contains(event.target)) {
+                    event.preventDefault();
+                    dropdownOptions[0].focus();
+                }
+
+                if (event.target === dropdownOptions[0]) {
+                    event.preventDefault(); 
+                    dropdownOptions[1].focus();
+                }
+
+                if (event.target === dropdownOptions[1]) {
+                    event.preventDefault(); 
+                    dropdownOptions[0].focus();
+                }
+            }
+
+            const focusOnButton = () => {
+                const dropdownButton = document.querySelector('.dropdown-btn'); 
+                dropdownButton.focus();
+            }
+
+            if (event.key === 'Enter') {
+                if (!dropdownListElement.contains(event.target)) {
+                    event.preventDefault();
+                    dropdownOptions[0].focus();
+                }
+                if (event.target === dropdownOptions[0]) {
+                    event.preventDefault();
+                    handleClickCurrent();
+                    focusOnButton();
+                }
+                if (event.target === dropdownOptions[1]) {
+                    event.preventDefault();
+                    dropdownOptions[1].blur();
+                    handleSetExportDir();
+                    focusOnButton();
+                }
+            }
+
+            if (event.key === 'Tab' || event.key === 'Escape') {
+                event.preventDefault();
+                focusOnButton();
+                setOpenDropDown(false);
+            }
+        }
+        if (openDropDown) {
+            document.addEventListener('keydown', handleKeyDown); 
+
+            return (() => {
+                document.removeEventListener('keydown', handleKeyDown); 
+            })
+        }
+    }, [openDropDown])
+
+    const handleKeydownOpenDropdown = (event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setOpenDropDown(true); 
+        }
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setOpenDropDown(false); 
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            setOpenDropDown(true);
+        }
+    }
+
+
+    const handleClickCurrent = () => {
+        setOpenDropDown(false);
+    }
+
     const handleSetExportDir = async () => {
+        setActive(false)
         const exportDir = await window.services.setExportDir(); 
         setExportDir(exportDir);
         setOpenDropDown(false);
+        setActive(true)
     }
 
     return (
@@ -38,7 +129,7 @@ const DownloadFolderDropdown = () => {
             </div>
         </Button>
       </div>
-    )
-}
+    )                                     
+}           
 
 export default DownloadFolderDropdown;
diff --git a/src/common/components/Modal.jsx b/src/common/components/Modal.jsx
@@ -64,7 +64,7 @@ const Modal = ({
       <div className="modal-dialog">
         <div className="modal-content">
           <div className={modalHeaderClassName}>
-            <h3 className="modal-title" defaultValue={"modalTitle"}>{modalTitle}</h3>
+            <h3 className="modal-title" defaultValue={"modalTitle"} aria-live="polite">{modalTitle}</h3>
             <button 
               type="button" 
               className="btn-close"