From 49f444dfe9316859ab0bbc00c75878315dfbcd81 Mon Sep 17 00:00:00 2001
From: Brian Hoang <brian@digital-labs.co.uk>
Date: Sat, 26 Oct 2019 15:30:27 +0100
Subject: [PATCH 1/2] auto focus on search bar and made searchbar and text area
 tab-able

---
 src/web/html/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 4063e138..35ce6860 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -168,7 +168,7 @@
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
                     <div class="title no-select">Operations</div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off">
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="1" autofocus>
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
@@ -266,7 +266,7 @@
                         </div>
                         <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
                             <div id="input-highlighter" class="no-select"></div>
-                            <textarea id="input-text" class="input-text" spellcheck="false"></textarea>
+                            <textarea id="input-text" class="input-text" spellcheck="false" tabindex="2"></textarea>
                             <div class="input-file" id="input-file">
                                 <div class="file-overlay" id="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">

From 726bf3345e3305d658c2de68bd4027db3ce2c6cf Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Sun, 27 Oct 2019 14:38:55 +0000
Subject: [PATCH 2/2] Added tabindex to ingredients

---
 src/web/HTMLIngredient.mjs | 15 ++++++++++++++-
 src/web/html/index.html    |  4 ++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 6f3f5e66..03f4e983 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -31,7 +31,9 @@ class HTMLIngredient {
         this.target = config.target;
         this.defaultIndex = config.defaultIndex || 0;
         this.toggleValues = config.toggleValues;
-        this.id = "ing-" + this.app.nextIngId();
+        this.ingId = this.app.nextIngId();
+        this.id = "ing-" + this.ingId;
+        this.tabIndex = this.ingId + 2; // Input = 1, Search = 2
         this.min = (typeof config.min === "number") ? config.min : "";
         this.max = (typeof config.max === "number") ? config.max : "";
         this.step = config.step || 1;
@@ -56,6 +58,7 @@ class HTMLIngredient {
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         value="${this.value}"
                         ${this.disabled ? "disabled" : ""}>
@@ -69,6 +72,7 @@ class HTMLIngredient {
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         value="${this.value}"
                         ${this.disabled ? "disabled" : ""}>
@@ -82,6 +86,7 @@ class HTMLIngredient {
                         <input type="text"
                             class="form-control arg toggle-string"
                             id="${this.id}"
+                            tabindex="${this.tabIndex}"
                             arg-name="${this.name}"
                             value="${this.value}"
                             ${this.disabled ? "disabled" : ""}>
@@ -104,6 +109,7 @@ class HTMLIngredient {
                     <input type="number"
                         class="form-control arg inline"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         value="${this.value}"
                         min="${this.min}"
@@ -120,6 +126,7 @@ class HTMLIngredient {
                             <input type="checkbox"
                                 class="arg"
                                 id="${this.id}"
+                                tabindex="${this.tabIndex}"
                                 arg-name="${this.name}"
                                 ${this.value ? " checked" : ""}
                                 ${this.disabled ? " disabled" : ""}
@@ -135,6 +142,7 @@ class HTMLIngredient {
                     <select
                         class="form-control arg inline"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
@@ -157,6 +165,7 @@ class HTMLIngredient {
                     <select
                         class="form-control arg no-state-change populate-option"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
@@ -186,6 +195,7 @@ class HTMLIngredient {
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         value="${this.value[this.defaultIndex].value}"
                         ${this.disabled ? "disabled" : ""}>
@@ -215,6 +225,7 @@ class HTMLIngredient {
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         value="${this.value[this.defaultIndex].value}"
                         ${this.disabled ? "disabled" : ""}>
@@ -244,6 +255,7 @@ class HTMLIngredient {
                     <textarea
                         class="form-control arg"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         rows="${this.rows ? this.rows : 3}"
                         ${this.disabled ? "disabled" : ""}>${this.value}</textarea>
@@ -256,6 +268,7 @@ class HTMLIngredient {
                     <select
                         class="form-control arg inline arg-selector"
                         id="${this.id}"
+                        tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
                         ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 35ce6860..c15c673a 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -168,7 +168,7 @@
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
                     <div class="title no-select">Operations</div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="1" autofocus>
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2">
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
@@ -266,7 +266,7 @@
                         </div>
                         <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
                             <div id="input-highlighter" class="no-select"></div>
-                            <textarea id="input-text" class="input-text" spellcheck="false" tabindex="2"></textarea>
+                            <textarea id="input-text" class="input-text" spellcheck="false" tabindex="1" autofocus></textarea>
                             <div class="input-file" id="input-file">
                                 <div class="file-overlay" id="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">