mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-26 06:52:13 +02:00
Fix some accessibility issues
This commit is contained in:
parent
cc70fdacf6
commit
4348b7067b
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="field" :class="{ 'pt-3' : hasOffset }">
|
||||
<label class="label" v-html="label"></label>
|
||||
<label :for="this.inputId(inputType,fieldName)" class="label" v-html="label"></label>
|
||||
<div class="control">
|
||||
<input :disabled="isDisabled" :id="this.inputId(inputType,fieldName)" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
|
||||
</div>
|
||||
|
@ -6,7 +6,7 @@
|
||||
<span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
|
||||
{{ $t('commons.2fauth_teaser')}}
|
||||
</p>
|
||||
<img src="logo.svg" style="height: 32px" alt="logo" />
|
||||
<img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
|
||||
<p class="block">
|
||||
©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
|
||||
</p>
|
||||
|
@ -83,7 +83,7 @@
|
||||
</transition>
|
||||
<div class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
|
||||
<div class="tfa-text has-ellipsis">
|
||||
<img :src="'/storage/icons/' + account.icon" v-if="account.icon && $root.appSettings.showAccountsIcons">
|
||||
<img :src="'/storage/icons/' + account.icon" v-if="account.icon && $root.appSettings.showAccountsIcons" :alt="$t('twofaccounts.x_icon', {service: account.service})">
|
||||
{{ displayService(account.service) }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.account === $t('errors.indecipherable')" :icon="['fas', 'exclamation-circle']" />
|
||||
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
|
||||
</div>
|
||||
@ -193,7 +193,7 @@
|
||||
<!-- search -->
|
||||
<div class="field">
|
||||
<div class="control has-icons-right">
|
||||
<input type="text" class="input is-rounded is-search" v-model="search">
|
||||
<input type="text" :title="$t('commons.search')" class="input is-rounded is-search" v-model="search">
|
||||
<span class="icon is-small is-right">
|
||||
<font-awesome-icon :icon="['fas', 'search']" v-if="!search" />
|
||||
<a class="delete" v-if="search" @click="search = '' "></a>
|
||||
|
@ -84,8 +84,8 @@
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
|
||||
<button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@
|
||||
<form-toggle class="has-uppercased-button" :form="form" :choices="otp_types" fieldName="otp_type" :label="$t('twofaccounts.forms.otp_type.label')" :help="$t('twofaccounts.forms.otp_type.help')" :hasOffset="true" />
|
||||
<div v-if="form.otp_type">
|
||||
<!-- secret -->
|
||||
<label class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
||||
<label :for="this.inputId('text','secret')" class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
@ -108,7 +108,7 @@
|
||||
</span>
|
||||
</p>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" v-model="form.secret">
|
||||
<input :id="this.inputId('text','secret')" class="input" type="text" v-model="form.secret">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
@ -30,8 +30,8 @@
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
|
||||
<button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +44,7 @@
|
||||
<form-toggle class="has-uppercased-button" :isDisabled="true" :form="form" :choices="otp_types" fieldName="otp_type" :label="$t('twofaccounts.forms.otp_type.label')" :help="$t('twofaccounts.forms.otp_type.help')" :hasOffset="true" />
|
||||
<div v-if="form.otp_type">
|
||||
<!-- secret -->
|
||||
<label class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
||||
<label :for="this.inputId('text','secret')" class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
||||
<div class="field has-addons">
|
||||
<p v-if="!secretIsLocked" class="control">
|
||||
<span class="select">
|
||||
@ -54,7 +54,7 @@
|
||||
</span>
|
||||
</p>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" v-model="form.secret" :disabled="secretIsLocked">
|
||||
<input :id="this.inputId('text','secret')" class="input" type="text" v-model="form.secret" :disabled="secretIsLocked">
|
||||
</p>
|
||||
<p class="control" v-if="secretIsLocked">
|
||||
<a class="button is-dark field-lock" @click="secretIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||
|
@ -57,5 +57,5 @@ return [
|
||||
'made_with' => 'Made with',
|
||||
'ui_icons_by' => 'UI Icons by',
|
||||
'logos_by' => 'Logos by',
|
||||
|
||||
'search' => 'Search',
|
||||
];
|
@ -17,8 +17,10 @@ return [
|
||||
'account' => 'Account',
|
||||
'accounts' => 'Accounts',
|
||||
'icon' => 'Icon',
|
||||
'x_icon' => '{service} icon',
|
||||
'remove_icon' => 'Remove icon',
|
||||
'no_account_here' => 'No 2FA here!',
|
||||
'add_first_account' => 'Add your first account',
|
||||
'add_first_account' => 'Pick a method and add your first account',
|
||||
'use_full_form' => 'Or use the full form',
|
||||
'add_one' => 'Add one',
|
||||
'show_qrcode' => 'Show QR code',
|
||||
|
Loading…
x
Reference in New Issue
Block a user