Add keyboard navigation to Network Auth entry list

Fixes #317
kee-org · Aug 19, 2023 · edea303 · edea303
1 parent 1de5f51
commit edea303
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/assets/styles/NetworkAuth.css b/src/assets/styles/NetworkAuth.css
@@ -53,3 +53,8 @@ body {
     padding:0px 0px 0px 4px;
     list-style:none;
 }
+
+li:focus-visible {
+    outline: none !important;
+    border-left: 2px #1a466b solid !important;
+}
diff --git a/src/dialogs/NetworkAuth.ts b/src/dialogs/NetworkAuth.ts
@@ -28,6 +28,7 @@ class NetworkAuth {
         this.setLogins(entries, list);
         container.appendChild(list);
         node.parentNode.insertBefore(container, node.nextSibling);
+        (list.firstChild as HTMLElement).focus();
     }
 
     private setLogins(entries: Entry[], container) {
@@ -57,15 +58,14 @@ class NetworkAuth {
                 displayGroupPath,
                 usernameDisplayValue
             ]);
-            loginItem.tabIndex = -1;
+            loginItem.tabIndex = i == 0 ? 0 : -1;
 
             loginItem.textContent = $STRF("matchedLogin_label", [
                 usernameDisplayValue,
                 entry.title
             ]);
 
-            //TODO:4: keyboard nav
-            //loginItem.addEventListener("keydown", this.keyboardNavHandler, false);
+            loginItem.addEventListener("keydown", this.keyboardNavHandler, false);
             loginItem.addEventListener(
                 "click",
                 function (event) {
@@ -87,6 +87,37 @@ class NetworkAuth {
             container.appendChild(loginItem);
         }
     }
+
+    private keyboardNavHandler(event: KeyboardEvent) {
+        const target = event.target as HTMLLIElement;
+
+        switch (event.keyCode) {
+            case 13: // enter
+                event.preventDefault();
+                event.stopPropagation();
+                target.dispatchEvent(new Event("keeCommand"));
+                break;
+            case 40: // down
+                event.preventDefault();
+                event.stopPropagation();
+                if (target.nextElementSibling) {
+                    (target.nextElementSibling as HTMLLIElement).focus();
+                }
+                break;
+            case 38: // up
+                event.preventDefault();
+                event.stopPropagation();
+                if (target.previousElementSibling) {
+                    (target.previousElementSibling as HTMLLIElement).focus();
+                }
+                break;
+            case 27: // esc
+                event.preventDefault();
+                event.stopPropagation();
+                window.close();
+                break;
+        }
+    }
 }
 
 let networkAuth: NetworkAuth;