Add aria-labels for reply/quote selector

This commit is contained in:
tusooa 2023-07-13 00:43:55 -04:00
parent d22079cf73
commit 63f56cfb27
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
2 changed files with 9 additions and 2 deletions

View File

@ -162,6 +162,7 @@ const PostStatusForm = {
} }
return { return {
randomSeed: `${Math.random()}`.replace('.', '-'),
dropFiles: [], dropFiles: [],
uploadingFiles: false, uploadingFiles: false,
error: null, error: null,

View File

@ -135,6 +135,7 @@
class="reply-or-quote-option" class="reply-or-quote-option"
tabindex="0" tabindex="0"
role="radio" role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
:aria-checked="!newStatus.quoting" :aria-checked="!newStatus.quoting"
@click="newStatus.quoting = false" @click="newStatus.quoting = false"
> >
@ -143,13 +144,16 @@
:checked="!newStatus.quoting" :checked="!newStatus.quoting"
> >
<label class="reply-or-quote-option-text"> <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> </label>
</div> </div>
<div <div
class="reply-or-quote-option" class="reply-or-quote-option"
tabindex="0" tabindex="0"
role="radio" role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
:aria-checked="newStatus.quoting" :aria-checked="newStatus.quoting"
@click="newStatus.quoting = true" @click="newStatus.quoting = true"
> >
@ -158,7 +162,9 @@
:checked="newStatus.quoting" :checked="newStatus.quoting"
> >
<label class="reply-or-quote-option-text"> <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> </label>
</div> </div>
</div> </div>