From fda0b81d9c653a1a93803a98582ebe9b10f3f433 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 21:57:54 +0100
Subject: [PATCH] feat: add tooltip and aria-label

---
 src/i18n/lang/en.json       | 4 +++-
 src/views/user/Login.vue    | 6 +++++-
 src/views/user/Register.vue | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 2c1fdf26..7fecb029 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -52,7 +52,9 @@
       "logout": "Logout",
       "emailInvalid": "Please enter a valid email address.",
       "usernameRequired": "Please provide a username.",
-      "passwordRequired": "Please provide a password."
+      "passwordRequired": "Please provide a password.",
+      "showPassword": "Show the password",
+      "hidePassword": "Hide the password"
     },
     "settings": {
       "title": "Settings",
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 145e2c66..6be2e783 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -53,7 +53,11 @@
 						tabindex="2"
 						@focusout="validateField('password')"
 					/>
-					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+					<a
+						@click="togglePasswordFieldType"
+						class="password-field-type-toggle"
+						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 					</a>
 				</div>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index ce994220..29ebed5b 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -59,7 +59,11 @@
 						@keyup.enter="submit"
 						@focusout="validatePassword"
 					/>
-					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+					<a
+						@click="togglePasswordFieldType" 
+						class="password-field-type-toggle"
+						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 					</a>
 				</div>