Client - make "show password" keyboard-navigable

fittrackee_client/src/components/Common/PasswordInput.vue

@@ -11,13 +11,15 @@
       @input="updatePassword"
       @invalid="invalidPassword"
     />
-    <div class="show-password" @click="togglePassword">
+    <div class="show-password">
+      <button class="transparent" @click.prevent="togglePassword" type="button">
         {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
         <i
           class="fa"
           :class="`fa-eye${showPassword ? '-slash' : ''}`"
           aria-hidden="true"
         />
+      </button>
     </div>
     <div v-if="checkStrength" class="form-info">
       <i class="fa fa-info-circle" aria-hidden="true" />
@@ -71,6 +73,7 @@
     (newPassword) => {
       if (newPassword === '') {
         passwordValue.value = ''
+        showPassword.value = false
       }
     }
   )
@@ -84,12 +87,15 @@
     flex-direction: column;
 
     .show-password {
+      margin-top: -0.5 * $default-margin;
+      display: flex;
+      justify-content: right;
+      button {
         font-style: italic;
         font-size: 0.85em;
-      text-align: right;
-      margin-top: -0.75 * $default-margin;
-      padding-right: $default-padding;
+        padding: $default-padding * 0.5 $default-padding;
         cursor: pointer;
       }
     }
+  }
 </style>

fittrackee_client/src/components/Common/PasswordStength.vue

@@ -9,6 +9,7 @@
       min="0"
       max="4"
       step="1"
+      :tabindex="-1"
     />
     <div v-if="passwordStrength" class="password-strength-details">
       <span class="password-strength-value">