accessibility improvements

This commit is contained in:
Avris 2020-10-31 16:08:48 +01:00
parent 8af29e2d80
commit 0dcae6f74f
8 changed files with 27 additions and 14 deletions

View File

@ -21,17 +21,19 @@
<div class="mb-3">
<SquareButton
v-for="link in [...config.contact.contacts, ...config.links.socials]" :key="link.url"
:link="link.url">
:link="link.url"
:aria-label="link.icon"
>
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
</SquareButton>
<br/>
<SquareButton link="https://avris.it">
<img src="~assets/avris.svg"/>
<SquareButton link="https://avris.it" aria-label="avris.it">
<img src="~assets/avris.svg" alt="Avris"/>
</SquareButton>
<SquareButton link="https://paypal.me/AndreAvris">
<SquareButton link="https://paypal.me/AndreAvris" aria-label="PayPal">
<Icon v="paypal" set="b"/>
</SquareButton>
<SquareButton link="https://gitlab.com/Avris/Zaimki">
<SquareButton link="https://gitlab.com/Avris/Zaimki" aria-label="GitLab">
<Icon v="gitlab" set="b"/>
</SquareButton>
</div>

View File

@ -3,7 +3,7 @@
<li v-for="(v, i) in iVal" ref="items">
<div class="input-group mb-1">
<div class="input-group-prepend">
<button class="btn btn-light border handle" type="button">
<button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
<Icon v="bars"/>
</button>
</div>
@ -11,7 +11,7 @@
<input v-model="iVal[i]" type="text" class="form-control" required/>
</slot>
<div class="input-group-append">
<button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)">
<button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
<Icon v="times"/>
</button>
</div>
@ -19,7 +19,7 @@
</li>
<li slot="footer">
<button class="btn btn-outline-success btn-block" type="button" @click.prevent="add">
<button class="btn btn-outline-success btn-block" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
<Icon v="plus"/>
</button>
</li>

View File

@ -1,17 +1,17 @@
<template>
<span>
<strong v-if="opinion === 1">
<img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" alt="" class="icon"/>
<img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" :aria-label="$t('profile.opinion.yes')" class="icon"/>
<nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
<span v-else>{{ word }}</span>
</strong>
<span v-else-if="opinion === 0">
<Icon v="thumbs-up"/>
<Icon v="thumbs-up" :aria-label="$t('profile.opinion.meh')"/>
<nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
<span v-else>{{ word }}</span>
</span>
<span v-else-if="opinion === -1" class="text-muted small">
<Icon v="thumbs-down"/>
<Icon v="thumbs-down" :aria-label="$t('profile.opinion.no')"/>
<nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
<span v-else>{{ word }}</span>
</span>

View File

@ -2,14 +2,17 @@
<ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
<div class="input-group-prepend">
<button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.yes')"
@click="s.update({key: s.val.key, value: 1})">
<Icon v="heart"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.meh')"
@click="s.update({key: s.val.key, value: 0})">
<Icon v="thumbs-up"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.no')"
@click="s.update({key: s.val.key, value: -1})">
<Icon v="thumbs-down"/>
</button>

View File

@ -11,7 +11,7 @@
<T>profile.edit</T>
</LocaleLink>
<Spinner v-if="deleting"/>
<a v-else href="#" class="badge badge-light" @click.prevent="removeProfile(locale)">
<a v-else href="#" class="badge badge-light" @click.prevent="removeProfile(locale)" :aria-label="$t('profile.delete')">
<Icon v="trash-alt"/>
</a>
</span>

View File

@ -1,6 +1,6 @@
<template>
<div class="scroll-btn" @click.prevent="scroll" :style="`opacity: ${shown ? 1 : 0}`">
<SquareButton link="#" :colour="colour">
<SquareButton link="#" :colour="colour" :aria-label="$t('table.scrollUp')">
<Icon v="arrow-alt-up"/>
</SquareButton>
</div>

View File

@ -4,7 +4,7 @@
<Icon v="share"/>
<T>share</T>:
</p>
<SquareButton v-for="network in networks" :key="network" :link="link(network)" :colour="colour(network)">
<SquareButton v-for="network in networks" :key="network" :link="link(network)" :colour="colour(network)" :aria-label="network">
<Icon :v="icon(network)" set="b"/>
</SquareButton>
</div>

View File

@ -726,6 +726,11 @@ profile:
header: 'Edytor wizytówki'
save: 'Zapisz wizytówkę'
opinion:
yes: 'Tak'
meh: 'Meh'
no: 'Nie'
share: 'Udostępnij'
crud:
@ -733,6 +738,7 @@ crud:
hide: 'Schowaj'
remove: 'Usuń'
edit: 'Edytuj'
add: 'Dodaj'
filter: 'Filtruj'
filterLong: 'Filtruj listę…'
@ -770,3 +776,5 @@ admin:
table:
empty: 'Pusto…'
sort: 'Przeciągnij by posortować'
scrollUp: 'Przewiń na samą górę'