Add or enhance alt text for images

resources/js/components/OtpDisplayer.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <figure class="image is-64x64" :class="{ 'no-icon': !internal_icon }" style="display: inline-block">
-            <img :src="'/storage/icons/' + internal_icon" v-if="internal_icon">
+            <img :src="'/storage/icons/' + internal_icon" v-if="internal_icon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
         </figure>
         <p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
         <p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>

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" :alt="$t('twofaccounts.x_icon', {service: account.service})">
+                                        <img :src="'/storage/icons/' + account.icon" v-if="account.icon && $root.appSettings.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, 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>

resources/js/views/twofaccounts/Create.vue

@@ -84,7 +84,7 @@
                                 </span>
                             </label>
                             <span class="tag is-black is-large" v-if="tempIcon">
-                                <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
+                                <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
                                 <button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
                             </span>
                         </div>

resources/js/views/twofaccounts/Edit.vue

@@ -30,7 +30,7 @@
                             </span>
                         </label>
                         <span class="tag is-black is-large" v-if="tempIcon">
-                            <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.x_icon', {service: form.service})">
+                            <img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
                             <button class="delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
                         </span>
                     </div>

resources/js/views/twofaccounts/Import.vue

@@ -18,13 +18,9 @@
                     <div v-if="exportedAccounts.length > 0">
                         <div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
                             <div class="is-flex is-justify-content-space-between">
-                                <!-- icon -->
-                                <!-- <div v-if="account.icon && $root.appSettings.showAccountsIcons">
-                                    <img class="account-icon" :src="'/storage/icons/' + account.icon">
-                                </div> -->
                                 <!-- Account name -->
                                 <div v-if="account.id > -2 && account.imported !== 0" class="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
-                                    <img v-if="account.icon && $root.appSettings.showAccountsIcons" class="import-icon" :src="'/storage/icons/' + account.icon">
+                                    <img v-if="account.icon && $root.appSettings.showAccountsIcons" class="import-icon" :src="'/storage/icons/' + account.icon" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
                                     {{ account.account }}
                                 </div>
                                 <div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>

resources/js/views/twofaccounts/QRcode.vue

@@ -3,7 +3,7 @@
         <div class="modal-background"></div>
         <div class="modal-content">
             <p class="has-text-centered m-5">
-                <img :src="qrcode" class="has-background-light">
+                <img :src="qrcode" class="has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
             </p>
         </div>
         <div class="fullscreen-footer">

resources/lang/en/commons.php

@@ -59,4 +59,5 @@ return [
     'logos_by' => 'Logos by',
     'search' => 'Search',
     '2fauth_description' => 'A web app to manage your Two-Factor Authentication (2FA) accounts and generate their security codes',
+    'image_of_qrcode_to_scan' => 'Image of a QR code to scan',
 ];

resources/lang/en/twofaccounts.php

@@ -17,7 +17,8 @@ return [
     'account' => 'Account',
     'accounts' => 'Accounts',
     'icon' => 'Icon',
-    'x_icon' => '{service} icon',
+    'icon_for_account_x_at_service_y' => 'Icon of the {account} account at {service}',
+    'icon_to_illustrate_the_account' => 'Icon that illustrates the account',
     'remove_icon' => 'Remove icon',
     'no_account_here' => 'No 2FA here!',
     'add_first_account' => 'Pick a method and add your first account',