Make generate password button tab focusable (#384)

Author: ayykamp

src/popup/addEditInterface.js

@@ -222,6 +222,17 @@ function AddEditInterface(settingsModel) {
             return `min-width: 65px; max-width: 442px; width: ${length * 8}px;`;
         }
 
+        /**
+         * Generate and set a new secret on the provided login object
+         *
+         * @param {object} login current secret details
+         * @returns {void}
+         */
+        function generateSecret(login) {
+            loginObj.setPassword(loginObj.generateSecret(passwordLength, symbols));
+            passwordGenerated = true;
+        }
+
         return {
             oncreate: function (vnode) {
                 let elems = ["div.title", "div.location div.store", "div.contents"];
@@ -490,13 +501,13 @@ function AddEditInterface(settingsModel) {
                                     ? helpersUI.highlight(loginObj.fields.secret)
                                     : ""
                             ),
-                            m("div.btn.generate", {
+                            m("div.btn.generate[tabindex=0]", {
                                 title: "Generate password",
-                                onclick: () => {
-                                    loginObj.setPassword(
-                                        loginObj.generateSecret(passwordLength, symbols)
-                                    );
-                                    passwordGenerated = true;
+                                onclick: () => generateSecret(loginObj),
+                                onkeydown: (e) => {
+                                    if (e.code == "Space") {
+                                        generateSecret(loginObj)
+                                    }
                                 },
                             }),
                         ]),

src/popup/colors.less

@@ -47,14 +47,14 @@
     .addEdit,
     .details {
         .btn {
+            &.generate {
+                background-color: @edit-bg-color;
+            }
+
             &:hover,
             &:focus {
                 background-color: @hover-bg-color;
             }
-
-            &.generate {
-                background-color: @edit-bg-color;
-            }
         }
 
         .contents {