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

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>

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>

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

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">

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()) }}

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>