Fix poll interaction

src/components/poll/poll.js

@@ -12,7 +12,8 @@ export default {
   data () {
     return {
       loading: false,
-      choices: []
+      choices: [],
+      randomSeed: `${Math.random()}`.replace('.', '-')
     }
   },
   created () {

src/components/poll/poll.vue

@@ -4,53 +4,63 @@
     :class="containerClass"
   >
     <div
-      v-for="(option, index) in options"
+      :role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
-      :key="index"
-      class="poll-option"
     >
       <div
-        v-if="showResults"
+        v-for="(option, index) in options"
-        :title="resultTitle(option)"
+        :key="index"
-        class="option-result"
+        class="poll-option"
       >
-        <div class="option-result-label">
+        <div
-          <span class="result-percentage">
+          v-if="showResults"
-            {{ percentageForOption(option.votes_count) }}%
+          :title="resultTitle(option)"
-          </span>
+          class="option-result"
-          <RichContent
+        >
-            :html="option.title_html"
+          <div class="option-result-label">
-            :handle-links="false"
+            <span class="result-percentage">
-            :emoji="emoji"
+              {{ 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"
+          tabindex="0"
-          :disabled="loading"
+          :role="poll.multiple ? 'checkbox' : 'radio'"
-          :value="index"
+          :aria-labelledby="`option-vote-${randomSeed}-${index}`"
+          :aria-checked="choices[index]"
+          @click="activateOption(index)"
         >
-        <label class="option-vote">
+          <input
-          <RichContent
+            v-if="poll.multiple"
-            :html="option.title_html"
+            type="checkbox"
-            :handle-links="false"
+            class="poll-checkbox"
-            :emoji="emoji"
+            :disabled="loading"
-          />
+            :value="index"
-        </label>
+          >
+          <input
+            v-else
+            type="radio"
+            :disabled="loading"
+            :value="index"
+          >
+          <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">
@@ -161,5 +171,9 @@
     padding: 0 0.5em;
     margin-right: 0.5em;
   }
+
+  .poll-checkbox {
+    display: none;
+  }
 }
 </style>