KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[a11y] add tooltips to opinions

This commit is contained in:
Avris 2021-10-29 16:48:01 +02:00
parent db57394ca2
commit 13602ac9e4
3 changed files with 59 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/Opinion.vue
View File

@ -1,22 +1,30 @@
<template> <template>
<span> <span>
<strong v-if="opinion === 1"> <strong v-if="opinion === 1">
<img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" :aria-label="$t('profile.opinion.yes')" class="icon invertible"/> <Tooltip :text="$t('profile.opinion.yes')">
<img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" class="icon invertible"/>
</Tooltip>
<nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link> <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
<span v-else><Spelling escape :text="word"/></span> <span v-else><Spelling escape :text="word"/></span>
</strong> </strong>
<span v-else-if="opinion === 2"> <span v-else-if="opinion === 2">
<Icon v="grin-tongue" :aria-label="$t('profile.opinion.jokingly')"/> <Tooltip :text="$t('profile.opinion.jokingly')">
<Icon v="grin-tongue"/>
</Tooltip>
<nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link> <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
<span v-else><Spelling escape :text="word"/></span> <span v-else><Spelling escape :text="word"/></span>
</span> </span>
<span v-else-if="opinion === 0"> <span v-else-if="opinion === 0">
<Icon v="thumbs-up" :aria-label="$t('profile.opinion.meh')"/> <Tooltip :text="$t('profile.opinion.meh')">
<Icon v="thumbs-up"/>
</Tooltip>
<nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link> <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
<span v-else><Spelling escape :text="word"/></span> <span v-else><Spelling escape :text="word"/></span>
</span> </span>
<span v-else-if="opinion === -1" class="text-muted small"> <span v-else-if="opinion === -1" class="text-muted small">
<Icon v="thumbs-down" :aria-label="$t('profile.opinion.no')"/> <Tooltip :text="$t('profile.opinion.no')">
<Icon v="thumbs-down"/>
</Tooltip>
<nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link> <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
<span v-else><Spelling escape :text="word"/></span> <span v-else><Spelling escape :text="word"/></span>
</span> </span>

20
components/OpinionListInput.vue
View File

@ -3,27 +3,31 @@
<template v-slot="s"> <template v-slot="s">
<button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']" <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.yes')" :aria-label="$t('profile.opinion.yes')"
:title="$t('profile.opinion.yes')"
@click="s.update({key: s.val.key, value: 1})"> @click="s.update({key: s.val.key, value: 1})">
<Icon v="heart"/> <Tooltip :text="$t('profile.opinion.yes')">
<Icon v="heart"/>
</Tooltip>
</button> </button>
<button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']" <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.jokingly')" :aria-label="$t('profile.opinion.jokingly')"
:title="$t('profile.opinion.jokingly')"
@click="s.update({key: s.val.key, value: 2})"> @click="s.update({key: s.val.key, value: 2})">
<Icon v="grin-tongue"/> <Tooltip :text="$t('profile.opinion.jokingly')">
<Icon v="grin-tongue"/>
</Tooltip>
</button> </button>
<button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']" <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.meh')" :aria-label="$t('profile.opinion.meh')"
:title="$t('profile.opinion.meh')"
@click="s.update({key: s.val.key, value: 0})"> @click="s.update({key: s.val.key, value: 0})">
<Icon v="thumbs-up"/> <Tooltip :text="$t('profile.opinion.meh')">
<Icon v="thumbs-up"/>
</Tooltip>
</button> </button>
<button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']" <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.no')" :aria-label="$t('profile.opinion.no')"
:title="$t('profile.opinion.no')"
@click="s.update({key: s.val.key, value: -1})"> @click="s.update({key: s.val.key, value: -1})">
<Icon v="thumbs-down"/> <Tooltip :text="$t('profile.opinion.no')">
<Icon v="thumbs-down"/>
</Tooltip>
</button> </button>
<input v-model="s.val.key" :class="['form-control', 'mw-input', invalid(s.val) ? 'border-danger' : '']" @keyup="s.update(s.val)" required/> <input v-model="s.val.key" :class="['form-control', 'mw-input', invalid(s.val) ? 'border-danger' : '']" @keyup="s.update(s.val)" required/>
</template> </template>

35
components/Tooltip.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<span class="tooltip-wrapper" :title="text" :aria-label="text">
<slot></slot>
<span class="tooltip-content bg-dark text-white border px-2 py-1 rounded">
{{ text }}
</span>
</span>
</template>
<script>
export default {
props: {
text: { required: true },
},
}
</script>
<style lang="scss">
.tooltip-wrapper {
position: relative;
.tooltip-content {
display: none;
position: absolute;
top: -2.2rem;
left: -50%;
font-weight: normal;
font-size: .85rem;
}
&:hover {
.tooltip-content {
display: block;
}
}
}
</style>