teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(a11y): improve contrast on poll results accessibility (#252)

Browse source
This commit is contained in:
Alvaro Saburido 2022-11-30 12:24:20 +01:00 committed by GitHub
parent 30b1d6b925
commit e11bf53f86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/status/StatusPoll.vue
View file

@ -42,14 +42,11 @@ async function vote(e: Event) {
</form>
<template v-else>
<div v-for="(option, index) of poll.options" :key="index" flex justify-between p-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
<div absolute top-0 left-0 bottom-0 bg-primary-active rounded-lg h-full class="w-[var(--bar-width)]" />
<div z-1 flex items-center gap-1 px-1>
<div>
{{ option.title }}
</div>
<div v-if="poll.voted && poll.ownVotes?.includes(index)">
<div i-ri:checkbox-circle-line />
</div>
<div absolute top-0 left-0 bottom-0 bg-primary-active rounded-l-sm rounded-r-lg h-full class="w-[var(--bar-width)]" />
<div z-1 flex items-center gap-1 px-1 text-inverted>
{{ option.title }}
<div v-if="poll.voted && poll.ownVotes?.includes(index)" i-ri:checkbox-circle-line />
</div>
<div z-1>
{{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}