pleroma-fe

commit: 63f56cfb274165e157378888f5d448bfb194a52f
parent d22079cf7392a1ef184d7c03ff7cb680e3e1c99c
Author: tusooa <tusooa@kazv.moe>
Date:   Thu, 13 Jul 2023 00:43:55 -0400

Add aria-labels for reply/quote selector

Diffstat:
M
src/components/post_status_form/post_status_form.js
1
+
M
src/components/post_status_form/post_status_form.vue
10
++++++++--

2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -162,6 +162,7 @@ const PostStatusForm = {
     }
 
     return {
+      randomSeed: `${Math.random()}`.replace('.', '-'),
       dropFiles: [],
       uploadingFiles: false,
       error: null,
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -135,6 +135,7 @@
             class="reply-or-quote-option"
             tabindex="0"
             role="radio"
+            :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
             :aria-checked="!newStatus.quoting"
             @click="newStatus.quoting = false"
           >
@@ -143,13 +144,16 @@
               :checked="!newStatus.quoting"
             >
             <label class="reply-or-quote-option-text">
-              {{ $t('post_status.reply_option') }}
+              <span :id="`reply-or-quote-option-${randomSeed}-reply`">
+                {{ $t('post_status.reply_option') }}
+              </span>
             </label>
           </div>
           <div
             class="reply-or-quote-option"
             tabindex="0"
             role="radio"
+            :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
             :aria-checked="newStatus.quoting"
             @click="newStatus.quoting = true"
           >
@@ -158,7 +162,9 @@
               :checked="newStatus.quoting"
             >
             <label class="reply-or-quote-option-text">
-              {{ $t('post_status.quote_option') }}
+              <span :id="`reply-or-quote-option-${randomSeed}-quote`">
+                {{ $t('post_status.quote_option') }}
+              </span>
             </label>
           </div>
         </div>