fix poll checkboxes

src/components/checkbox/checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
+    :class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
   >
     <span
       v-if="!!$slots.before"
@@ -19,9 +19,9 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input -checkbox checkbox-indicator"
+      class="input checkbox-indicator"
       :aria-hidden="true"
-      :class="{ disabled }"
+      :class="[{ disabled }, radio ? '-radio' : '-checkbox']"
       @transitionend.capture="onTransitionEnd"
     />
     <span
@@ -37,6 +37,7 @@
 <script>
 export default {
   props: [
+    'radio',
     'modelValue',
     'indeterminate',
     'disabled'
@@ -68,6 +69,15 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
+  &.-radio {
+    .checkbox-indicator {
+      &,
+      &::before {
+        border-radius: 9999px;
+      }
+    }
+  }
+
   &-indicator,
   & .label {
     vertical-align: middle;

src/components/poll/poll.js

@@ -1,6 +1,7 @@
 import Timeago from 'components/timeago/timeago.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
+import Checkbox from 'components/checkbox/checkbox.vue'
 import { forEach, map } from 'lodash'
 import { usePollsStore } from 'src/stores/polls'
 
@@ -9,7 +10,8 @@ export default {
   props: ['basePoll', 'emoji'],
   components: {
     Timeago,
-    RichContent
+    RichContent,
+    Checkbox
   },
   data () {
     return {
@@ -78,26 +80,15 @@ export default {
     resultTitle (option) {
       return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
     },
-    activateOption (index) {
+    activateOption (index, value) {
-      // forgive me father: doing checking the radio/checkboxes
+      let result
-      // in code because of customized input elements need either
-      // a) an extra element for the actual graphic, or b) use a
-      // pseudo element for the label. We use b) which mandates
-      // using "for" and "id" matching which isn't nice when the
-      // same poll appears multiple times on the site (notifs and
-      // timeline for example). With code we can make sure it just
-      // works without altering the pseudo element implementation.
-      const allElements = this.$el.querySelectorAll('input')
-      const clickedElement = this.$el.querySelector(`input[value="${index}"]`)
       if (this.poll.multiple) {
-        // Checkboxes, toggle only the clicked one
+        result = this.choices || this.options.map(() => false)
-        clickedElement.checked = !clickedElement.checked
       } else {
-        // Radio button, uncheck everything and check the clicked one
+        result = this.options.map(() => false)
-        forEach(allElements, element => { element.checked = false })
-        clickedElement.checked = true
       }
-      this.choices = map(allElements, e => e.checked)
+      result[index] = value
+      this.choices = result
     },
     optionId (index) {
       return `poll${this.poll.id}-${index}`

src/components/poll/poll.scss

@@ -0,0 +1,72 @@
+.poll {
+  .votes {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 0.5em;
+  }
+
+  .poll-option {
+    margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
+  }
+
+  .option-result {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    color: var(--textLight);
+  }
+
+  .option-result-label {
+    display: flex;
+    align-items: center;
+    padding: 0.1em 0.25em;
+    z-index: 1;
+    word-break: break-word;
+  }
+
+  .result-percentage {
+    width: 3.5em;
+    flex-shrink: 0;
+  }
+
+  .result-fill {
+    height: 100%;
+    position: absolute;
+    border-radius: var(--roundness);
+    top: 0;
+    left: 0;
+    transition: width 0.5s;
+  }
+
+  .option-vote {
+    display: flex;
+    align-items: center;
+  }
+
+  input {
+    width: 3.5em;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+  }
+
+  &.loading * {
+    cursor: progress;
+  }
+
+  .poll-vote-button {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .poll-checkbox {
+    display: none;
+  }
+}

src/components/poll/poll.vue

@@ -37,32 +37,21 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
-          class="input unstyled"
-          @click="activateOption(index)"
         >
-          <!-- TODO: USE CHECKBOX -->
+          <Checkbox
-          <input
+            :radio="!poll.multiple"
-            v-if="poll.multiple"
-            type="checkbox"
-            class="input -checkbox poll-checkbox"
             :disabled="loading"
-            :value="index"
+            :model-value="choices[index]"
+            @update:model-value="value => activateOption(index, value)"
           >
-          <input
+            {{ choices[index] }}
-            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>
+          </Checkbox>
         </div>
       </div>
     </div>
@@ -112,77 +101,4 @@
 
 <script src="./poll.js"></script>
 
-<style lang="scss">
+<style src="./poll.scss" lang="scss"/>
-.poll {
-  .votes {
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 0.5em;
-  }
-
-  .poll-option {
-    margin: 0.75em 0.5em;
-
-    .input {
-      line-height: inherit;
-    }
-  }
-
-  .option-result {
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    color: var(--textLight);
-  }
-
-  .option-result-label {
-    display: flex;
-    align-items: center;
-    padding: 0.1em 0.25em;
-    z-index: 1;
-    word-break: break-word;
-  }
-
-  .result-percentage {
-    width: 3.5em;
-    flex-shrink: 0;
-  }
-
-  .result-fill {
-    height: 100%;
-    position: absolute;
-    border-radius: var(--roundness);
-    top: 0;
-    left: 0;
-    transition: width 0.5s;
-  }
-
-  .option-vote {
-    display: flex;
-    align-items: center;
-  }
-
-  input {
-    width: 3.5em;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-  }
-
-  &.loading * {
-    cursor: progress;
-  }
-
-  .poll-vote-button {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-  }
-
-  .poll-checkbox {
-    display: none;
-  }
-}
-</style>