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> <template>
<div class="field" :class="{ 'pt-3' : hasOffset }"> <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"> <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])"/> <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> </div>

View File

@ -6,7 +6,7 @@
<span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br /> <span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
{{ $t('commons.2fauth_teaser')}} {{ $t('commons.2fauth_teaser')}}
</p> </p>
<img src="logo.svg" style="height: 32px" alt="logo" /> <img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
<p class="block"> <p class="block">
©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a> ©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
</p> </p>

View File

@ -83,7 +83,7 @@
</transition> </transition>
<div class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)"> <div class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-text has-ellipsis"> <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']" /> {{ 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> <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
</div> </div>
@ -193,7 +193,7 @@
<!-- search --> <!-- search -->
<div class="field"> <div class="field">
<div class="control has-icons-right"> <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"> <span class="icon is-small is-right">
<font-awesome-icon :icon="['fas', 'search']" v-if="!search" /> <font-awesome-icon :icon="['fas', 'search']" v-if="!search" />
<a class="delete" v-if="search" @click="search = '' "></a> <a class="delete" v-if="search" @click="search = '' "></a>

View File

@ -84,8 +84,8 @@
</span> </span>
</label> </label>
<span class="tag is-black is-large" v-if="tempIcon"> <span class="tag is-black is-large" v-if="tempIcon">
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" > <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
<button class="delete is-small" @click.prevent="deleteIcon"></button> <button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
</span> </span>
</div> </div>
</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" /> <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"> <div v-if="form.otp_type">
<!-- secret --> <!-- 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"> <div class="field has-addons">
<p class="control"> <p class="control">
<span class="select"> <span class="select">
@ -108,7 +108,7 @@
</span> </span>
</p> </p>
<p class="control is-expanded"> <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> </p>
</div> </div>
<div class="field"> <div class="field">

View File

@ -30,8 +30,8 @@
</span> </span>
</label> </label>
<span class="tag is-black is-large" v-if="tempIcon"> <span class="tag is-black is-large" v-if="tempIcon">
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" > <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
<button class="delete is-small" @click.prevent="deleteIcon"></button> <button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
</span> </span>
</div> </div>
</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" /> <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"> <div v-if="form.otp_type">
<!-- secret --> <!-- 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"> <div class="field has-addons">
<p v-if="!secretIsLocked" class="control"> <p v-if="!secretIsLocked" class="control">
<span class="select"> <span class="select">
@ -54,7 +54,7 @@
</span> </span>
</p> </p>
<p class="control is-expanded"> <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>
<p class="control" v-if="secretIsLocked"> <p class="control" v-if="secretIsLocked">
<a class="button is-dark field-lock" @click="secretIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')"> <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', 'made_with' => 'Made with',
'ui_icons_by' => 'UI Icons by', 'ui_icons_by' => 'UI Icons by',
'logos_by' => 'Logos by', 'logos_by' => 'Logos by',
'search' => 'Search',
]; ];

View File

@ -17,8 +17,10 @@ return [
'account' => 'Account', 'account' => 'Account',
'accounts' => 'Accounts', 'accounts' => 'Accounts',
'icon' => 'Icon', 'icon' => 'Icon',
'x_icon' => '{service} icon',
'remove_icon' => 'Remove icon',
'no_account_here' => 'No 2FA here!', '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', 'use_full_form' => 'Or use the full form',
'add_one' => 'Add one', 'add_one' => 'Add one',
'show_qrcode' => 'Show QR code', 'show_qrcode' => 'Show QR code',