From 40b74c774540594b0dbcb2b873ed91dfd2a24798 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 21 Sep 2021 17:58:25 -0400
Subject: [PATCH] Accessibility Improvements (#467)

* accessibility improvements

* fix listen icon
---
 src/components/HistoryPage.vue   |  2 +-
 src/components/LoginPage.vue     |  6 ++++--
 src/components/Navigation.vue    |  8 ++++++--
 src/components/Preferences.vue   |  2 +-
 src/components/RegisterPage.vue  |  6 ++++--
 src/components/SearchResults.vue |  2 +-
 src/components/VideoItem.vue     |  6 +++---
 src/components/VideoRedirect.vue |  3 +--
 src/components/WatchVideo.vue    |  2 +-
 src/locales/en.json              | 10 +++++++++-
 10 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 89029912..027989cf 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center">Watch History</h1>
+    <h1 class="uk-text-bold uk-text-center">{{ $t("titles.history") }}</h1>
 
 
     <div style="text-align: right">
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 040fddcc..bd2cd50b 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -7,7 +7,8 @@
                     type="text"
                     v-model="username"
                     autocomplete="username"
-                    placeholder="Username"
+                    :placeholder="$t('login.username')"
+                    :aria-label="$t('login.username')"
                 />
             </div>
             <div class="uk-form-row">
@@ -16,7 +17,8 @@
                     type="password"
                     v-model="password"
                     autocomplete="password"
-                    placeholder="Password"
+                    :placeholder="$t('login.password')"
+                    :aria-label="$t('login.password')"
                 />
             </div>
             <div class="uk-form-row">
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 8e0336aa..93481309 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -19,7 +19,9 @@
             <input
                 class="uk-input uk-width-medium"
                 type="text"
-                placeholder="Search"
+                role="search"
+                :title="$t('actions.search')"
+                :placeholder="$t('actions.search')"
                 v-model="searchText"
                 @keyup="onKeyUp"
                 @focus="onInputFocus"
@@ -50,7 +52,9 @@
         <input
             class="uk-input"
             type="text"
-            placeholder="Search"
+            role="search"
+            :title="$t('actions.search')"
+            :placeholder="$t('actions.search')"
             v-model="searchText"
             @keyup="onKeyUp"
             @focus="onInputFocus"
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index df28b057..262cee47 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -194,7 +194,7 @@
                 <td>{{ instance.locations }}</td>
                 <td>{{ instance.cdn == "Yes" ? $t("actions.yes") : $t("actions.no") }}</td>
                 <td>
-                    <a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
+                    <a :href="sslScore(instance.apiurl)" target="_blank"> {{ $t("actions.view_ssl_score") }}</a>
                 </td>
             </tr>
         </tbody>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index a4851e63..d9b3f705 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -7,7 +7,8 @@
                     type="text"
                     v-model="username"
                     autocomplete="username"
-                    placeholder="Username"
+                    :placeholder="$t('login.username')"
+                    :aria-label="$t('login.username')"
                 />
             </div>
             <div class="uk-form-row">
@@ -16,7 +17,8 @@
                     type="password"
                     v-model="password"
                     autocomplete="password"
-                    placeholder="Password"
+                    :placeholder="$t('login.password')"
+                    :aria-label="$t('login.password')"
                 />
             </div>
             <div class="uk-form-row">
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index c623e740..389f65ec 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -3,7 +3,7 @@
         {{ $route.query.search_query }}
     </h1>
 
-    <label for="ddlSearchFilters"><b>Filter: </b></label>
+    <label for="ddlSearchFilters"><b>{{ $t("actions.filter") }}: </b></label>
     <select
         id="ddlSearchFilters"
         default="all"
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 9de2c720..b3540ce1 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -6,7 +6,7 @@
                 :width="width"
                 style="width: 100%"
                 v-bind:src="video.thumbnail"
-                alt="thumbnail"
+                alt=""
                 loading="lazy"
             />
             <div class="uk-position-relative">
@@ -30,14 +30,14 @@
         </router-link>
 
         <div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
-            <router-link :to="video.url + '&listen=1'">
+            <router-link :to="video.url + '&listen=1'" :aria-label="'listen to '+video.title" :title="'listen to '+video.title">
                 <font-awesome-icon icon="headphones"></font-awesome-icon>
             </router-link>
         </div>
 
         <div v-if="video.uploaderUrl && video.uploaderName && !hideChannel" style="display: flex; flex-flow: row; height: 15%">
             <router-link class="uk-link-muted" :to="video.uploaderUrl">
-                <img v-if="video.uploaderAvatar" :src="video.uploaderAvatar" loading="lazy" class="uk-border-circle" style="margin-right: 0.5rem; margin-top:0.5rem; width: 32px; height: 32px;" />
+                <img v-if="video.uploaderAvatar" :src="video.uploaderAvatar" loading="lazy" :alt="video.uploaderName" class="uk-border-circle" style="margin-right: 0.5rem; margin-top:0.5rem; width: 32px; height: 32px;" />
             </router-link>
 
             <div>
diff --git a/src/components/VideoRedirect.vue b/src/components/VideoRedirect.vue
index 1394969d..fa329208 100644
--- a/src/components/VideoRedirect.vue
+++ b/src/components/VideoRedirect.vue
@@ -1,8 +1,7 @@
 <template>
-    <div>Loading...</div>
+    <div>{{ $t("actions.loading") }}</div>
 </template>
 
-
 <script>
 export default {
     activated() {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 420743d0..cc30a01f 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -56,7 +56,7 @@
             </div>
 
             <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                <img :src="video.uploaderAvatar" loading="lazy" class="uk-border-circle" />
+                <img :src="video.uploaderAvatar" alt="" loading="lazy" class="uk-border-circle" />
                 <router-link class="uk-link uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
                     {{ video.uploader }} </router-link
                 >&thinsp;<font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
diff --git a/src/locales/en.json b/src/locales/en.json
index 51cdb54f..43fd9c89 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -58,7 +58,11 @@
         "minimize_description": "Minimize Description",
         "show_description": "Show Description",
         "disable_lbry": "Disable LBRY for Streaming",
-        "enable_lbry_proxy": "Enable Proxy for LBRY"
+        "enable_lbry_proxy": "Enable Proxy for LBRY",
+        "view_ssl_score": "View SSL Score",
+        "search": "Search",
+        "filter": "Filter",
+        "loading": "Loading..."
     },
     "comment": {
         "pinned_by": "Pinned by"
@@ -69,6 +73,10 @@
         "has_cdn":"Has CDN?",
         "ssl_score":"SSL Score"
     },
+    "login": {
+        "username":"Username",
+        "password":"Password"
+    },
     "video": {
         "videos": "Videos",
         "views": "views",