From 6d5592ffde2b2758a87ae8752a61a13463e0e1c3 Mon Sep 17 00:00:00 2001
From: e218736 <147728997+e218736@users.noreply.github.com>
Date: Wed, 28 Feb 2024 17:19:20 +0000
Subject: [PATCH] notify user to use escape key on first tab press

---
 src/web/Manager.mjs                |  1 +
 src/web/html/index.html            |  2 +-
 src/web/stylesheets/layout/_io.css | 10 ++++++++++
 src/web/waiters/InputWaiter.mjs    | 17 +++++++++++++++--
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index b02a7eee..db0850af 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -176,6 +176,7 @@ class Manager {
         document.getElementById("btn-new-tab").addEventListener("click", this.input.addInputClick.bind(this.input));
         document.getElementById("btn-previous-input-tab").addEventListener("mousedown", this.input.previousTabClick.bind(this.input));
         document.getElementById("btn-next-input-tab").addEventListener("mousedown", this.input.nextTabClick.bind(this.input));
+        document.getElementById("input-text").addEventListener("keydown", this.input.tabNotification.bind(this.input), false);
         this.addListeners("#btn-next-input-tab,#btn-previous-input-tab", "mouseup", this.input.tabMouseUp, this.input);
         this.addListeners("#btn-next-input-tab,#btn-previous-input-tab", "mouseout", this.input.tabMouseUp, this.input);
         document.getElementById("btn-go-to-input-tab").addEventListener("click", this.input.goToTab.bind(this.input));
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 5c3c3263..75ea7618 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -238,7 +238,7 @@
                                     <i class="material-icons">delete</i>
                                 </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout" data-help-title="Resetting the pane layout" data-help="CyberChef's panes can be resized to suit your area of focus. This button will reset the pane sizes to their default configuration.">
-                                    <i class="material-icons">view_compact</i>
+                                    <i class="material-icons" aria-hidden='true'>view_compact</i>
                                 </button>
                             </span>
                         </div>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 0146bf27..e452aef8 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -380,6 +380,16 @@
     filter: brightness(98%);
 }
 
+#input-alert {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
 /* Highlighting */
 .ͼ2.cm-focused .cm-selectionBackground {
     background-color: var(--hl5);
diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs
index 25c1629d..366314da 100644
--- a/src/web/waiters/InputWaiter.mjs
+++ b/src/web/waiters/InputWaiter.mjs
@@ -91,7 +91,7 @@ class InputWaiter {
             lineWrapping: new Compartment,
             fileDetailsPanel: new Compartment
         };
-
+        localStorage.setItem("alerted", "no");
         const initialState = EditorState.create({
             doc: null,
             extensions: [
@@ -141,7 +141,7 @@ class InputWaiter {
                     if (e.docChanged && !this.silentInputChange)
                         this.inputChange(e);
                     this.silentInputChange = false;
-                })
+                }),
             ]
         });
 
@@ -186,7 +186,20 @@ class InputWaiter {
         this.inputChrEnc = chrEncVal;
         this.inputChange();
     }
+    /**
+     * Handler for Tab key events within input
+     * Notifies keyboard/screen reader users how to navigate out of input field
+     * @param {event} event
+     */
+    tabNotification(event) {
+        const alerted = localStorage.getItem("alerted") || "";
 
+        if (event.key === "Tab" && alerted !== "yes") {
+            this.app.alert("Press Escape then Tab to exit the input field.", 7000);
+            localStorage.setItem("alerted", "yes");
+            return $("#snackbar-container").append("<p role='alert' id='input-alert'>Press Escape then Tab to exit the input field.</p>");
+        }
+    }
     /**
      * Getter for the input character encoding
      * @returns {number}