feat: add tooltip and aria-label
This commit is contained in:
parent
8397608fef
commit
fda0b81d9c
3 changed files with 13 additions and 3 deletions
|
@ -52,7 +52,9 @@
|
||||||
"logout": "Logout",
|
"logout": "Logout",
|
||||||
"emailInvalid": "Please enter a valid email address.",
|
"emailInvalid": "Please enter a valid email address.",
|
||||||
"usernameRequired": "Please provide a username.",
|
"usernameRequired": "Please provide a username.",
|
||||||
"passwordRequired": "Please provide a password."
|
"passwordRequired": "Please provide a password.",
|
||||||
|
"showPassword": "Show the password",
|
||||||
|
"hidePassword": "Hide the password"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"title": "Settings",
|
"title": "Settings",
|
||||||
|
|
|
@ -53,7 +53,11 @@
|
||||||
tabindex="2"
|
tabindex="2"
|
||||||
@focusout="validateField('password')"
|
@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'"/>
|
<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -59,7 +59,11 @@
|
||||||
@keyup.enter="submit"
|
@keyup.enter="submit"
|
||||||
@focusout="validatePassword"
|
@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'"/>
|
<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue