extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-08 21:44:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enhance accessibility with correct keyboard navigation and focus style

Browse Source
This commit is contained in:
Bubka
2022-09-21 21:38:53 +02:00
parent fb7c0a9c6a
commit 4f3fa4ba75
17 changed files with 120 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/components/FormPasswordField.vue
View File

@ -13,10 +13,10 @@
v-on:change="$emit('field-changed', form[fieldName])"
v-on:keyup="checkCapsLock"
/>
<span v-if="currentType == 'password'" class="icon is-small is-right is-clickable" @click="currentType = 'text'" :title="$t('auth.forms.reveal_password')">
<span v-if="currentType == 'password'" role="button" tabindex="0" class="icon is-small is-right is-clickable" @keyup.enter="setFieldType('text')" @click="setFieldType('text')" :title="$t('auth.forms.reveal_password')">
<font-awesome-icon :icon="['fas', 'eye-slash']" />
</span>
<span v-else class="icon is-small is-right is-clickable" @click="currentType = 'password'" :title="$t('auth.forms.hide_password')">
<span v-else role="button" tabindex="0" class="icon is-small is-right is-clickable" @keyup.enter="setFieldType('password')" @click="setFieldType('password')" :title="$t('auth.forms.hide_password')">
<font-awesome-icon :icon="['fas', 'eye']" />
</span>
</div>
@ -121,6 +121,12 @@
checkCapsLock(event) {
this.hasCapsLockOn = event.getModifierState('CapsLock') ? true : false
},
setFieldType(event) {
if (this.currentType != event) {
this.currentType = event
}
}
},
}
</script>