From 9c6c35ea89108b652415f990cb768767afcbe7b0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <=>
Date: Sun, 26 Dec 2021 23:38:44 +0000
Subject: [PATCH] :wheelchair: Fixes accesibility issues in some Widgets

---
 src/components/Widgets/Apod.vue            | 2 +-
 src/components/Widgets/CryptoWatchList.vue | 2 +-
 src/components/Widgets/GitHubProfile.vue   | 6 +++---
 src/components/Widgets/GitHubTrending.vue  | 2 +-
 src/components/Widgets/IframeWidget.vue    | 1 +
 src/components/Widgets/NewsHeadlines.vue   | 2 +-
 src/components/Widgets/PublicIp.vue        | 2 +-
 src/components/Widgets/RssFeed.vue         | 4 ++--
 src/components/Widgets/StatPing.vue        | 7 +++++--
 9 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Widgets/Apod.vue b/src/components/Widgets/Apod.vue
index 6bd9e0c6..5633cc70 100644
--- a/src/components/Widgets/Apod.vue
+++ b/src/components/Widgets/Apod.vue
@@ -4,7 +4,7 @@
     {{ title }}
   </a>
   <a :href="hdImage" title="View HD Image" class="picture" target="__blank">
-    <img :src="image" />
+    <img :src="image" :alt="title" />
   </a>
   <p class="copyright">{{ copyright }}</p>
   <p class="description">{{ truncatedDescription }}</p>
diff --git a/src/components/Widgets/CryptoWatchList.vue b/src/components/Widgets/CryptoWatchList.vue
index 115f42bf..0f11f232 100644
--- a/src/components/Widgets/CryptoWatchList.vue
+++ b/src/components/Widgets/CryptoWatchList.vue
@@ -7,7 +7,7 @@
       class="asset-wrapper"
       v-tooltip="tooltip(asset.info)"
     >
-      <img class="icon" :src="asset.image" />
+      <img class="icon" :src="asset.image" :alt="`${asset} icon`" />
       <p class="name">{{ asset.name }}</p>
       <p class="price">{{ asset.price | formatPrice }}</p>
       <p :class="`percent ${asset.percentChange > 0 ? 'up' : 'down'}`">
diff --git a/src/components/Widgets/GitHubProfile.vue b/src/components/Widgets/GitHubProfile.vue
index 4f7de097..8f24aa34 100644
--- a/src/components/Widgets/GitHubProfile.vue
+++ b/src/components/Widgets/GitHubProfile.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="readme-stats">
-  <img class="stats-card" v-if="!hideProfileCard" :src="profileCard" />
-  <img class="stats-card" v-if="!hideLanguagesCard" :src="topLanguagesCard" />
+  <img class="stats-card" v-if="!hideProfileCard" :src="profileCard" alt="Profile Card" />
+  <img class="stats-card" v-if="!hideLanguagesCard" :src="topLanguagesCard" alt="Languages" />
   <template v-if="repos">
-    <img class="stats-card" v-for="(repo, index) in repoCards" :key="index" :src="repo" />
+    <img class="stats-card" v-for="(repo, i) in repoCards" :key="i" :src="repo" :alt="repo" />
   </template>
 </div>
 </template>
diff --git a/src/components/Widgets/GitHubTrending.vue b/src/components/Widgets/GitHubTrending.vue
index 3045fe0a..cb65702a 100644
--- a/src/components/Widgets/GitHubTrending.vue
+++ b/src/components/Widgets/GitHubTrending.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="trending-repos-wrapper" v-if="trendingRepos">
   <div v-for="repo in trendingRepos" :key="repo.idx" class="repo-row">
-    <img class="repo-img" v-if="repo.avatar" :src="repo.avatar" />
+    <img class="repo-img" v-if="repo.avatar" :src="repo.avatar" alt="Repo" />
     <div class="repo-info">
       <p class="repo-name">{{ repo.name }}</p>
       <div class="star-wrap">
diff --git a/src/components/Widgets/IframeWidget.vue b/src/components/Widgets/IframeWidget.vue
index d611a769..39dbb013 100644
--- a/src/components/Widgets/IframeWidget.vue
+++ b/src/components/Widgets/IframeWidget.vue
@@ -4,6 +4,7 @@
     v-if="frameUrl"
     :src="frameUrl"
     :id="frameId"
+    title="Iframe Widget"
     :style="frameHeight ? `height: ${frameHeight}px` : ''"
   />
 </div>
diff --git a/src/components/Widgets/NewsHeadlines.vue b/src/components/Widgets/NewsHeadlines.vue
index afa6e95b..e79c0c96 100644
--- a/src/components/Widgets/NewsHeadlines.vue
+++ b/src/components/Widgets/NewsHeadlines.vue
@@ -7,7 +7,7 @@
       <span class="date">{{ article.published | date }}</span>
     </div>
     <p class="description">{{ article.description }}</p>
-    <img class="thumbnail" v-if="article.image" :src="article.image" />
+    <img class="thumbnail" v-if="article.image" :src="article.image" alt="Thumbnail" />
   </div>
 </div>
 </template>
diff --git a/src/components/Widgets/PublicIp.vue b/src/components/Widgets/PublicIp.vue
index 93c3450f..bcb7513d 100644
--- a/src/components/Widgets/PublicIp.vue
+++ b/src/components/Widgets/PublicIp.vue
@@ -2,7 +2,7 @@
 <div class="ip-info-wrapper">
   <p class="ip-address">{{ ipAddr }}</p>
   <div class="region-wrapper" title="Open in Maps">
-    <img class="flag-image" :src="flagImg" />
+    <img class="flag-image" :src="flagImg" alt="Flag" />
     <div class="info-text">
       <p class="isp-name">{{ ispName }}</p>
       <a class="ip-location" :href="mapsUrl">{{ location }}</a>
diff --git a/src/components/Widgets/RssFeed.vue b/src/components/Widgets/RssFeed.vue
index 06fc3e75..12359eb7 100644
--- a/src/components/Widgets/RssFeed.vue
+++ b/src/components/Widgets/RssFeed.vue
@@ -2,7 +2,7 @@
 <div class="rss-wrapper">
   <!-- Feed Meta Info -->
   <a class="meta-container" v-if="meta" :href="meta.link" :title="meta.description">
-    <img class="feed-icon" :src="meta.image" v-if="meta.image" />
+    <img class="feed-icon" :src="meta.image" v-if="meta.image" alt="Feed Image" />
     <div class="feed-text">
       <p class="feed-title">{{ meta.title }}</p>
       <p class="feed-author" v-if="meta.author">By {{ meta.author }}</p>
@@ -12,7 +12,7 @@
   <div class="post-wrapper" v-if="posts">
     <div class="post-row" v-for="(post, indx) in posts" :key="indx">
       <a class="post-top" :href="post.link">
-        <img class="post-img" :src="post.image" v-if="post.image">
+        <img class="post-img" :src="post.image" v-if="post.image" alt="Post Image">
         <div class="post-title-wrap">
           <p class="post-title">{{ post.title }}</p>
           <p class="post-date">
diff --git a/src/components/Widgets/StatPing.vue b/src/components/Widgets/StatPing.vue
index d34c47f0..2378b114 100644
--- a/src/components/Widgets/StatPing.vue
+++ b/src/components/Widgets/StatPing.vue
@@ -14,8 +14,11 @@
     </p>
     <!-- Charts -->
     <div class="charts">
-      <img class="uptime-pie-chart" :src="makeChartUrl(service.uptime24, '24 Hours')" />
-      <img class="uptime-pie-chart" :src="makeChartUrl(service.uptime7, '7 Days')" />
+      <img
+        class="uptime-pie-chart" alt="24 Hour Uptime Chart"
+        :src="makeChartUrl(service.uptime24, '24 Hours')" />
+      <img class="uptime-pie-chart" alt="7 Day Uptime Chart"
+        :src="makeChartUrl(service.uptime7, '7 Days')" />
     </div>
     <!-- Info -->
     <div class="info">