2 files changed, 60 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/utils/controllers.mjs b/browser/components/aboutlogins/content/utils/controllers.mjs
new file mode 100644
index 0000000000..13c46dfcaf
--- /dev/null
+++ b/browser/components/aboutlogins/content/utils/controllers.mjs
@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Simple controller wrapper that binds a controller and runs cleanup function
+// https://lit.dev/docs/composition/controllers/
+export const withSimpleController = (host, functionToBind, ...args) =>
+  class {
+    constructor() {
+      host.addController(this);
+    }
+    hostConnected() {
+      this.cleanup = functionToBind?.(host, ...args);
+    }
+    hostDisconnected() {
+      this.cleanup?.();
+    }
+  };
diff --git a/browser/components/aboutlogins/content/utils/keypress.mjs b/browser/components/aboutlogins/content/utils/keypress.mjs
new file mode 100644
index 0000000000..13a97964c0
--- /dev/null
+++ b/browser/components/aboutlogins/content/utils/keypress.mjs
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { withSimpleController } from "./controllers.mjs";
+
+const useKeyEvent =
+  keyEventName => (target, keyCombination, callback, options) => {
+    const parts = keyCombination.split("+");
+    const keys = parts.map(part => part.toLowerCase());
+    const modifiers = ["ctrl", "alt", "shift", "meta"];
+
+    const handleKeyEvent = event => {
+      const isModifierCorrect = modifiers.every(
+        modifier => keys.includes(modifier) === event[`${modifier}Key`]
+      );
+
+      const actualKey = keys.find(key => !modifiers.includes(key));
+
+      // We check the code value rather than key since key value
+      // can be missleading without prevent default e.g. option + N = ñ
+      const isKeyCorrect =
+        event.code.toLowerCase() === `key${actualKey}`.toLowerCase() ||
+        event.code.toLowerCase() === actualKey.toLowerCase();
+
+      if (isModifierCorrect && isKeyCorrect) {
+        if (options?.preventDefault) {
+          event.preventDefault();
+        }
+        callback?.(event);
+      }
+    };
+
+    target.addEventListener(keyEventName, handleKeyEvent);
+
+    return () => {
+      target.removeEventListener(keyEventName, handleKeyEvent);
+    };
+  };
+
+export const handleKeyPress = (host, ...args) =>
+  new (withSimpleController(host, useKeyEvent("keydown"), ...args))();