Fix some accessibility issues

This commit is contained in:
Bubka 2022-09-10 17:59:52 +02:00
parent cc70fdacf6
commit 4348b7067b
7 changed files with 16 additions and 14 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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')">

View File

@ -57,5 +57,5 @@ return [
'made_with' => 'Made with',
'ui_icons_by' => 'UI Icons by',
'logos_by' => 'Logos by',
'search' => 'Search',
];

View File

@ -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',