♿ Fixes accesibility issues in some Widgets

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>

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'}`">

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="!hideProfileCard" :src="profileCard" alt="Profile Card" />
-  <img class="stats-card" v-if="!hideLanguagesCard" :src="topLanguagesCard" />
+  <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>

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">

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>

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>

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>

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">

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
-      <img class="uptime-pie-chart" :src="makeChartUrl(service.uptime7, '7 Days')" />
+        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">