feat(a11y): enhance post-related a11y features (#2328)

This commit is contained in:
lazzzis 2023-08-12 03:26:37 -07:00 committed by GitHub
parent 5a765187ab
commit 4325bca22b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 10 additions and 6 deletions

View file

@ -11,6 +11,7 @@ const { editor } = defineProps<{
<VDropdown v-if="editor" placement="top">
<button
btn-action-icon
:aria-label="$t('tooltip.open_editor_tools')"
>
<div i-ri:font-size-2 />
</button>

View file

@ -369,7 +369,7 @@ onDeactivated(() => {
@select="insertEmoji"
@select-custom="insertCustomEmoji"
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
<div i-ri:emotion-line />
</button>
</PublishEmojiPicker>

View file

@ -55,9 +55,10 @@ useCommand({
:hover=" !disabled ? hover : undefined"
focus:outline-none
:focus-visible="hover"
:class="active ? color : (disabled ? 'op25 pointer-events-none' : 'text-secondary')"
:class="active ? color : (disabled ? 'op25 cursor-not-allowed' : 'text-secondary')"
:aria-label="content"
:disabled="disabled"
:aria-disabled="disabled"
>
<CommonTooltip placement="bottom" :content="content">
<div

View file

@ -48,9 +48,11 @@ useHydratedHead({
<span ms1 font-bold cursor-pointer>{{ $t('state.edited') }}</span>
</StatusEditIndicator>
</div>
<div>&middot;</div>
<div aria-hidden="true">
&middot;
</div>
<StatusVisibilityIndicator :status="status" />
<div v-if="status.application?.name">
<div v-if="status.application?.name" aria-hidden="true">
&middot;
</div>
<div v-if="status.application?.website && status.application.name">

View file

@ -30,7 +30,7 @@ function getToggleText() {
<slot name="spoiler" />
</div>
<div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
<button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" :aria-expanded="showContent" @click="toggleContent()">
<div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line />
{{ showContent ? $t('status.spoiler_show_less') : $t(getToggleText()) }}

View file

@ -10,6 +10,6 @@ const visibility = $computed(() => statusVisibilities.find(v => v.value === stat
<template>
<CommonTooltip :content="$t(`visibility.${visibility.value}`)" placement="bottom">
<div :class="visibility.icon" />
<div :class="visibility.icon" :aria-label="$t(`visibility.${visibility.value}`)" />
</CommonTooltip>
</template>