From 6cc0d05e7813bacaa49c79a25fa8697ba9aff87a Mon Sep 17 00:00:00 2001
From: j264415 <j264415@protonmail.com>
Date: Wed, 6 Mar 2024 17:03:23 +0000
Subject: [PATCH] added full functionality to support-model with arrows tab and
 enter/space.

---
 src/web/html/index.html                |  8 ++---
 src/web/stylesheets/layout/_modals.css |  5 +++
 src/web/waiters/ControlsWaiter.mjs     | 42 ++++++++++++++++----------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index c3650fb5..d80f6435 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -573,22 +573,22 @@
 
                         <ul class="nav nav-tabs" role="tablist">
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
+                                <a id="tab-1" class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
                                     FAQs
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-2" class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
                                     Report a bug
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-3" class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
                                     About
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-4" class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
                                     Keybindings
                                 </a>
                             </li>
diff --git a/src/web/stylesheets/layout/_modals.css b/src/web/stylesheets/layout/_modals.css
index affc372d..69ac4bcd 100755
--- a/src/web/stylesheets/layout/_modals.css
+++ b/src/web/stylesheets/layout/_modals.css
@@ -78,6 +78,11 @@
     border-left: 2px solid var(--primary-border-colour);
 }
 
+p a:focus{
+    color: #0a6ebd;
+    text-decoration: underline;
+}
+
 .checkbox label input[type=checkbox]+.checkbox-decorator .check,
 .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
     border-color: var(--input-border-colour);
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 5c22d542..eb7fb14c 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -355,13 +355,14 @@ class ControlsWaiter {
         const faqsAElement = faqs.getElementsByTagName("a");
         for (let i = 0; i < faqsAElement.length; i++) {
             faqsAElement[i].setAttribute("tabindex", "0");
+            faqsAElement[i].addEventListener("keydown", this.navigateFAQList, false);
         }
 
         const tabs = document.querySelectorAll('[role="tab"]');
 
         for (let i = 0; i < tabs.length; i++) {
             tabs[i].addEventListener("keydown", this.changeTabs, false);
-            tabs[i].addEventListener("keydown", this.navigateTabsList, false);
+            // tabs[i].addEventListener("keydown", this.navigateFAQList, false);
         }
 
         const reportBugInfo = document.getElementById("report-bug-info");
@@ -403,29 +404,38 @@ ${navigator.userAgent}
             } else {
                 prevTab.previousElementSibling.firstElementChild.focus();
             }
-        } else if (ev.key === "Tab" && !ev.shiftKey) {
-            tab.parentElement.parentElement.nextElementSibling.firstElementChild.querySelector("[class='btn btn-primary']").focus();
-        }
+        } else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-1")) {
+            document.getElementById("faqs").querySelector("[class='btn btn-primary']").focus();
+        }  else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-2")) {
+            document.getElementById("report-bug").querySelector("[class='btn btn-primary']").focus();
+        }  else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-3")) {
+            document.getElementById("about").querySelector("[href]").focus();
+        }  else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-4")) {
+            const button = document.getElementById("support-modal").getElementsByClassName("modal-footer");
+            const close = button[0].firstElementChild;
+            close.focus();
+        } else if (ev.key === "Enter" || ev.key === "Space" ||ev.key === " ") {
+            tab.click();
+        }  
     }
 
      /**
     * @param {Event} ev
     */
-    navigateTabsList(ev) {
-        ev.preventDefault();
-        if (ev.key === "Enter" || ev.key === "Space" ||ev.key === " ") {
-            const el = ev.target;
-            const targetElement = el.parentElement.parentElement;
+    navigateFAQList(ev) {
+       
+        const el = ev.target.nextElementSibling;
+        if (ev.key === "Enter" || ev.key === "Space"|| ev.key === " "){
             ev.preventDefault();
-            for (let i = 0; i < targetElement.children.length; i++) {
-                const targetChild = targetElement.children[i];
-                if (targetChild.children !== undefined && targetChild.children.classList.querySelectorAll("nav-link")) {
-                    if (!targetChild.contains("active")) {
-                        targetChild.add("active");
-                    }
+            const question = el.classList;
+            if(question !== undefined && question.value){
+                if (!question.value.includes("show")) {
+                    question.add("show");
+                } else if (question.contains("show")) {
+                    question.remove("show");
                 }
             }
-        }
+        } 
     }
 
     /**