Fixes accesibility issues in some Widgets

This commit is contained in:
Alicia Sykes 2021-12-26 23:38:44 +00:00
parent 1324b43c0e
commit 9c6c35ea89
9 changed files with 16 additions and 12 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -4,6 +4,7 @@
v-if="frameUrl"
:src="frameUrl"
:id="frameId"
title="Iframe Widget"
:style="frameHeight ? `height: ${frameHeight}px` : ''"
/>
</div>

View File

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

View File

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

View File

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

View File

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