accessibility improvements

components/Footer.vue

@@ -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">
+                    <SquareButton link="https://avris.it" aria-label="avris.it">
-                        <img src="~assets/avris.svg"/>
+                        <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>

components/ListInput.vue

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

components/Opinion.vue

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

components/OpinionListInput.vue

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

components/ProfileOverview.vue

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

components/ScrollButton.vue

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

components/Share.vue

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

locale/pl/translations.suml

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