diff options
Diffstat (limited to 'src/components/poll/poll.vue')
| -rw-r--r-- | src/components/poll/poll.vue | 127 |
1 files changed, 75 insertions, 52 deletions
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index cacc3298..e12f3e61 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -4,53 +4,66 @@ :class="containerClass" > <div - v-for="(option, index) in options" - :key="index" - class="poll-option" + :role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')" > <div - v-if="showResults" - :title="resultTitle(option)" - class="option-result" + v-for="(option, index) in options" + :key="index" + class="poll-option" > - <div class="option-result-label"> - <span class="result-percentage"> - {{ percentageForOption(option.votes_count) }}% - </span> - <RichContent - :html="option.title_html" - :handle-links="false" - :emoji="emoji" + <div + v-if="showResults" + :title="resultTitle(option)" + class="option-result" + > + <div class="option-result-label"> + <span class="result-percentage"> + {{ percentageForOption(option.votes_count) }}% + </span> + <RichContent + :html="option.title_html" + :handle-links="false" + :emoji="emoji" + /> + </div> + <div + class="result-fill" + :style="{ 'width': `${percentageForOption(option.votes_count)}%` }" /> </div> <div - class="result-fill" - :style="{ 'width': `${percentageForOption(option.votes_count)}%` }" - /> - </div> - <div - v-else - @click="activateOption(index)" - > - <input - v-if="poll.multiple" - type="checkbox" - :disabled="loading" - :value="index" - > - <input v-else - type="radio" - :disabled="loading" - :value="index" + tabindex="0" + :role="poll.multiple ? 'checkbox' : 'radio'" + :aria-labelledby="`option-vote-${randomSeed}-${index}`" + :aria-checked="choices[index]" + class="input unstyled" + @click="activateOption(index)" > - <label class="option-vote"> - <RichContent - :html="option.title_html" - :handle-links="false" - :emoji="emoji" - /> - </label> + <!-- TODO: USE CHECKBOX --> + <input + v-if="poll.multiple" + type="checkbox" + class="input -checkbox poll-checkbox" + :disabled="loading" + :value="index" + > + <input + v-else + type="radio" + :disabled="loading" + :value="index" + class="input -radio" + > + <label class="option-vote"> + <RichContent + :id="`option-vote-${randomSeed}-${index}`" + :html="option.title_html" + :handle-links="false" + :emoji="emoji" + /> + </label> + </div> </div> </div> <div class="footer faint"> @@ -63,15 +76,25 @@ > {{ $t('polls.vote') }} </button> + <span + v-if="poll.pleroma?.non_anonymous" + :title="$t('polls.non_anonymous_title')" + > + {{ $t('polls.non_anonymous') }} + · + </span> <div class="total"> <template v-if="typeof poll.voters_count === 'number'"> - {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }} · + {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }} </template> <template v-else> - {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} · + {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} </template> + <span v-if="expiresAt !== null"> + · + </span> </div> - <span> + <span v-if="expiresAt !== null"> <i18n-t scope="global" :keypath="expired ? 'polls.expired' : 'polls.expires_in'" @@ -90,8 +113,6 @@ <script src="./poll.js"></script> <style lang="scss"> -@import "../../variables"; - .poll { .votes { display: flex; @@ -101,6 +122,10 @@ .poll-option { margin: 0.75em 0.5em; + + .input { + line-height: inherit; + } } .option-result { @@ -108,8 +133,7 @@ display: flex; flex-direction: row; position: relative; - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); + color: var(--textLight); } .option-result-label { @@ -128,12 +152,7 @@ .result-fill { height: 100%; position: absolute; - color: $fallback--text; - color: var(--pollText, $fallback--text); - background-color: $fallback--lightBg; - background-color: var(--poll, $fallback--lightBg); - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); + border-radius: var(--roundness); top: 0; left: 0; transition: width 0.5s; @@ -161,5 +180,9 @@ padding: 0 0.5em; margin-right: 0.5em; } + + .poll-checkbox { + display: none; + } } </style> |