pleroma-fe

commit: eec27700f0199e6f9cf478a4945d6939d28e5931
parent e45dff0b269a56ee576ef0d23e23a1d76f04bc54
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Sun, 19 Feb 2023 17:19:15 +0000

Merge branch 'tusooa/fix-poll-reg' into 'develop'

Fix poll interaction

See merge request pleroma/pleroma-fe!1788
Diffstat:
M
src/components/poll/poll.js
3
++-
M
src/components/poll/poll.vue
92
+++++++++++++++++++++++++++++++++++++++++++++----------------------------------

2 files changed, 55 insertions(+), 40 deletions(-)
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
@@ -12,7 +12,8 @@ export default {
   data () {
     return {
       loading: false,
-      choices: []
+      choices: [],
+      randomSeed: `${Math.random()}`.replace('.', '-')
     }
   },
   created () {
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
@@ -4,53 +4,63 @@
     :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]"
+          @click="activateOption(index)"
         >
-        <label class="option-vote">
-          <RichContent
-            :html="option.title_html"
-            :handle-links="false"
-            :emoji="emoji"
-          />
-        </label>
+          <input
+            v-if="poll.multiple"
+            type="checkbox"
+            class="poll-checkbox"
+            :disabled="loading"
+            :value="index"
+          >
+          <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>