From d889947773d08755f9822dd8e6be28d1d0bd7097 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sun, 18 Sep 2022 17:04:37 +0200
Subject: [PATCH] Add or enhance alt text for images

---
 resources/js/components/OtpDisplayer.vue   | 2 +-
 resources/js/views/Accounts.vue            | 2 +-
 resources/js/views/twofaccounts/Create.vue | 2 +-
 resources/js/views/twofaccounts/Edit.vue   | 2 +-
 resources/js/views/twofaccounts/Import.vue | 6 +-----
 resources/js/views/twofaccounts/QRcode.vue | 2 +-
 resources/lang/en/commons.php              | 1 +
 resources/lang/en/twofaccounts.php         | 3 ++-
 8 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/OtpDisplayer.vue b/resources/js/components/OtpDisplayer.vue
index 954a8b58..6b40d7cc 100644
--- a/resources/js/components/OtpDisplayer.vue
+++ b/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>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index ef84e584..6a3b299a 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" :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>
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index 93870e28..341d7cd9 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/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>
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index f283f805..58c5f6ed 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/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>
diff --git a/resources/js/views/twofaccounts/Import.vue b/resources/js/views/twofaccounts/Import.vue
index 18244736..b4fadf9f 100644
--- a/resources/js/views/twofaccounts/Import.vue
+++ b/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>
diff --git a/resources/js/views/twofaccounts/QRcode.vue b/resources/js/views/twofaccounts/QRcode.vue
index aafd6daa..dd8aec63 100644
--- a/resources/js/views/twofaccounts/QRcode.vue
+++ b/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">
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index 590eb742..a2f03202 100644
--- a/resources/lang/en/commons.php
+++ b/resources/lang/en/commons.php
@@ -59,4 +59,5 @@
     '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',
 ];
\ No newline at end of file
diff --git a/resources/lang/en/twofaccounts.php b/resources/lang/en/twofaccounts.php
index b3f7e700..7b1d56ae 100644
--- a/resources/lang/en/twofaccounts.php
+++ b/resources/lang/en/twofaccounts.php
@@ -17,7 +17,8 @@
     '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',