From 4325bca22b6f7dceaf8b5605aae644086b9ac729 Mon Sep 17 00:00:00 2001
From: lazzzis <lazzzis@outlook.com>
Date: Sat, 12 Aug 2023 03:26:37 -0700
Subject: [PATCH] feat(a11y): enhance post-related a11y features (#2328)

---
 components/publish/PublishEditorTools.vue       | 1 +
 components/publish/PublishWidget.vue            | 2 +-
 components/status/StatusActionButton.vue        | 3 ++-
 components/status/StatusDetails.vue             | 6 ++++--
 components/status/StatusSpoiler.vue             | 2 +-
 components/status/StatusVisibilityIndicator.vue | 2 +-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/publish/PublishEditorTools.vue b/components/publish/PublishEditorTools.vue
index 85d03e97..7515f7f1 100644
--- a/components/publish/PublishEditorTools.vue
+++ b/components/publish/PublishEditorTools.vue
@@ -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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index c766805f..53ad2cf1 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -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>
diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
index 95987f15..5029671c 100644
--- a/components/status/StatusActionButton.vue
+++ b/components/status/StatusActionButton.vue
@@ -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
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 1b64aa24..513c7527 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -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">
diff --git a/components/status/StatusSpoiler.vue b/components/status/StatusSpoiler.vue
index 1cb3fc25..d295b59e 100644
--- a/components/status/StatusSpoiler.vue
+++ b/components/status/StatusSpoiler.vue
@@ -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()) }}
diff --git a/components/status/StatusVisibilityIndicator.vue b/components/status/StatusVisibilityIndicator.vue
index 95015897..2daba3f5 100644
--- a/components/status/StatusVisibilityIndicator.vue
+++ b/components/status/StatusVisibilityIndicator.vue
@@ -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>