Accessibility - Notify keyboard/screen reader user how to exit input field

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

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>

src/web/stylesheets/layout/_io.css

@@ -380,6 +380,16 @@
     filter: brightness(98%);
 }
 
+#visually-hidden-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);

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='visually-hidden-input-alert'>Press Escape then Tab to exit the input field.</p>");
+        }
+    }
     /**
      * Getter for the input character encoding
      * @returns {number}