[PM-26449] Add mouse cursor hover on the Edit Shortcut link (#16708)

* PM-26449 add hover and focus styling for edit shortcut link, add tab support to the link

* reduce styling scope, switch from span to appropriate a tag

apps/desktop/src/app/accounts/settings.component.html

@@ -351,13 +351,15 @@
                 <small class="help-block" *ngIf="form.value.enableAutotype">
                   <b>{{ "important" | i18n }}</b>
                   {{ "enableAutotypeDescriptionTransitionKey" | i18n }}
-                  <span
+                  <a
                     class="settings-link"
+                    tabindex="0"
                     *ngIf="this.form.value.enableAutotype"
                     (click)="saveAutotypeShortcut()"
+                    (keydown.enter)="saveAutotypeShortcut(); $event.preventDefault()"
                   >
                     {{ "editShortcut" | i18n }}
-                  </span></small
+                  </a></small
                 >
               </div>
               <div class="form-group">

apps/desktop/src/scss/misc.scss

@@ -360,11 +360,16 @@ form,
   }
 }
 
-.settings-link {
+.help-block a.settings-link {
+  text-decoration: none;
   @include themify($themes) {
     color: themed("primaryColor");
+
+    &:hover,
+    &:focus {
+      color: darken(themed("primaryColor"), 6%);
+    }
   }
-  font-weight: bold;
 }
 
 app-root > #loading,