Added tab focus to top banner and navigation to About/Support Modal

src/web/html/index.html

@@ -145,7 +145,7 @@
         <button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
             <i class="material-icons">star</i>
         </button>
-        <div id="content-wrapper">
+        <div tabindex="0" id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">
                     <a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">Download CyberChef <i class="material-icons">file_download</i></a>
@@ -172,7 +172,7 @@
                     <div class="title no-select" data-help-title="Operations list" data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
                         Operations
                     </div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="0" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
@@ -573,22 +573,22 @@ <h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
 
                         <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>

src/web/stylesheets/layout/_banner.css

@@ -26,6 +26,36 @@
     color: var(--banner-url-colour);
 }
 
+#options:focus {
+    background-color: #eef3ec;
+    border: solid black 2px;
+    border-radius: 4px;
+}
+
+#support:focus {
+    background-color: #eef3ec;
+    border: solid black 2px;
+    border-radius: 4px;
+}
+
+#notice:focus {
+    background-color: #eef3ec;
+    border: solid black 2px;
+    border-radius: 4px;
+}
+
+#banner .col a:focus {
+    background-color: #eef3ec;
+    border: solid black 2px;
+    border-radius: 4px;
+}
+
+#notice-wrapper #notice:focus {
+    background-color: #eef3ec;
+    border: solid black 2px;
+    border-radius: 4px;
+}
+
 #notice-wrapper {
     text-align: center;
     overflow: hidden;

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);

src/web/waiters/ControlsWaiter.mjs

@@ -351,6 +351,18 @@ class ControlsWaiter {
      */
     supportButtonClick(e) {
         e.preventDefault();
+        const faqs = document.getElementById("faqs");
+        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);
+        }
 
         const reportBugInfo = document.getElementById("report-bug-info");
         const saveLink = this.generateStateUrl(true, true, null, null, "https://gchq.github.io/CyberChef/");
@@ -367,6 +379,64 @@ ${navigator.userAgent}
     }
 
 
+    /**
+    * @param {Event} ev
+    */
+    changeTabs(ev) {
+        const tab = ev.target;
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (ev.key === "ArrowRight") {
+            const nextTab = tab.parentElement;
+            if (nextTab.nextElementSibling === null) {
+                tab.parentElement.parentElement.firstElementChild.firstElementChild.focus();
+            } else {
+                nextTab.nextElementSibling.firstElementChild.focus();
+            }
+
+        } else if (ev.key === "ArrowLeft") {
+            const prevTab = tab.parentElement;
+
+            if (prevTab.previousElementSibling === null) {
+                tab.parentElement.parentElement.lastElementChild.firstElementChild.focus();
+            } else {
+                prevTab.previousElementSibling.firstElementChild.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
+   */
+    navigateFAQList(ev) {
+
+        const el = ev.target.nextElementSibling;
+        if (ev.key === "Enter" || ev.key === "Space" || ev.key === " ") {
+            ev.preventDefault();
+            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");
+                }
+            }
+        }
+    }
+
     /**
      * Shows the stale indicator to show that the input or recipe has changed
      * since the last bake.