From 4348b7067b860ad636dc43696d4dabd5dcc1846a Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sat, 10 Sep 2022 17:59:52 +0200
Subject: [PATCH] Fix some accessibility issues

---
 resources/js/components/FormField.vue      | 2 +-
 resources/js/views/About.vue               | 2 +-
 resources/js/views/Accounts.vue            | 4 ++--
 resources/js/views/twofaccounts/Create.vue | 8 ++++----
 resources/js/views/twofaccounts/Edit.vue   | 8 ++++----
 resources/lang/en/commons.php              | 2 +-
 resources/lang/en/twofaccounts.php         | 4 +++-
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
index fc585171..a3015b57 100644
--- a/resources/js/components/FormField.vue
+++ b/resources/js/components/FormField.vue
@@ -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>
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
index c1bc78f0..b9664e52 100644
--- a/resources/js/views/About.vue
+++ b/resources/js/views/About.vue
@@ -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>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 472af9d2..b06c789c 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -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>
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index 2f635739..cafd3f2b 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/resources/js/views/twofaccounts/Create.vue
@@ -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">
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index 250855d1..ed0f451e 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/resources/js/views/twofaccounts/Edit.vue
@@ -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')">
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index 392d23ab..e6f1d5d6 100644
--- a/resources/lang/en/commons.php
+++ b/resources/lang/en/commons.php
@@ -57,5 +57,5 @@ return [
     'made_with' => 'Made with',
     'ui_icons_by' => 'UI Icons by',
     'logos_by' => 'Logos by',
-
+    'search' => 'Search',
 ];
\ No newline at end of file
diff --git a/resources/lang/en/twofaccounts.php b/resources/lang/en/twofaccounts.php
index 7bd3920d..cccbd144 100644
--- a/resources/lang/en/twofaccounts.php
+++ b/resources/lang/en/twofaccounts.php
@@ -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',