fix(a11y): add more aria labels

components/account/AccountMoreButton.vue

@@ -37,7 +37,7 @@ const toggleBlockDomain = async () => {
 
 <template>
   <CommonDropdown :eager-mount="command">
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
       <div rounded-5 p2 group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>

components/help/HelpPreview.vue

@@ -40,7 +40,7 @@ const teams: Team[] = [
 
 <template>
   <div p8 flex="~ col gap-4" relative max-h-screen of-auto>
-    <button btn-action-icon absolute top-0 right-0 m1 @click="emit('close')">
+    <button btn-action-icon absolute top-0 right-0 m1 aria-label="Close" @click="emit('close')">
       <div i-ri:close-fill />
     </button>
 

components/modal/ModalDialog.vue

@@ -123,7 +123,7 @@ function onTransitionEnd() {
       >
         <slot />
       </div>
-      <button v-if="type === 'preview'" btn-action-icon bg="black/20" hover:bg="black/40" dark:bg="white/10" dark:hover:bg="white/20" absolute top-0 right-0 m1 @click="close">
+      <button v-if="type === 'preview'" btn-action-icon bg="black/20" aria-label="Close" hover:bg="black/40" dark:bg="white/10" dark:hover:bg="white/20" absolute top-0 right-0 m1 @click="close">
         <div i-ri:close-fill text-white />
       </button>
     </div>

components/nav/NavFooter.vue

@@ -8,13 +8,14 @@ const buildTimeAgo = useTimeAgo(buildTime)
   <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2" items-center mb4>
       <CommonTooltip :content="t('nav_footer.toggle_theme')">
-        <button flex i-ri:sun-line dark:i-ri:moon-line text-lg @click="toggleDark()" />
+        <button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="t('nav_footer.toggle_theme')" @click="toggleDark()" />
       </CommonTooltip>
       <CommonTooltip :content="t('nav_footer.zen_mode')">
         <button
           flex
           text-lg
           :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+          :aria-label="t('nav_footer.zen_mode')"
           @click="toggleZenMode()"
         />
       </CommonTooltip>

components/nav/SelectFeatureFlags.vue

@@ -7,7 +7,7 @@ const featureFlags = useFeatureFlags()
 <template>
   <CommonTooltip :content="t('nav_footer.select_feature_flags')">
     <CommonDropdown>
-      <button flex>
+      <button flex :aria-label="t('nav_footer.select_feature_flags')">
         <div i-ri:flag-line text-lg />
       </button>
 

components/nav/SelectLanguage.vue

@@ -15,7 +15,7 @@ const handleLocale = async (locale: string) => {
 <template>
   <CommonTooltip :content="t('nav_footer.select_language')">
     <CommonDropdown>
-      <button flex>
+      <button flex :aria-label="t('nav_footer.select_language')">
         <div i-ri:earth-line text-lg />
       </button>
 

components/publish/PublishWidget.vue

@@ -203,7 +203,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           border="t base"
         >
           <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
-            <button btn-action-icon @click="pickAttachments">
+            <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
               <div i-ri:image-add-line />
             </button>
           </CommonTooltip>
@@ -212,6 +212,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
             <CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
               <button
                 btn-action-icon
+                :aria-label="$t('tooltip.toggle_code_block')"
                 :class="editor.isActive('codeBlock') ? 'op100' : 'op50'"
                 @click="editor?.chain().focus().toggleCodeBlock().run()"
               >
@@ -223,7 +224,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           <div flex-auto />
 
           <CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')">
-            <button btn-action-icon @click="toggleSensitive">
+            <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
               <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
               <div v-else i-ri:alarm-warning-line />
             </button>
@@ -231,7 +232,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
           <CommonTooltip placement="bottom" :content="$t('tooltip.change_content_visibility')">
             <CommonDropdown>
-              <button btn-action-icon w-12>
+              <button :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon w-12>
                 <div :class="currentVisibility.icon" />
                 <div i-ri:arrow-down-s-line text-sm text-secondary mr--1 />
               </button>

components/status/StatusAttachment.vue

@@ -61,6 +61,7 @@ const aspectRatio = computed(() => {
       focus:outline-none
       focus:ring="2 primary inset"
       rounded-lg
+      aria-label="Open image preview dialog"
       @click="openImagePreviewDialog({
         src,
         alt: attachment.description!,

components/tag/TagActionButton.vue

@@ -25,6 +25,7 @@ const toggleFollowTag = async () => {
   <button
     rounded group focus:outline-none
     hover:text-primary focus-visible:text-primary
+    :aria-label="tag.following ? `Unfollow ${tag.name} tag` : `Follow ${tag.name} tag`"
     @click="toggleFollowTag()"
   >
     <CommonTooltip placement="bottom" :content="tag.following ? 'Unfollow' : 'Follow'">

components/user/UserSwitcher.vue

@@ -24,6 +24,7 @@ const switchUser = (user: UserLogin) => {
       <button
         flex rounded px4 py3 text-left
         hover:bg-active cursor-pointer transition-100
+        aria-label="Switch user"
         @click="switchUser(user)"
       >
         <AccountInfo :account="user.account" />

layouts/default.vue

@@ -30,6 +30,7 @@
                 m5 p2 rounded-full text-start w-full
                 hover:bg-active cursor-pointer transition-100
                 class="md:(w-7.5/10 rounded-5)"
+                aria-label="Switch account"
               >
                 <AccountInfo :account="currentUser.account" md:flex="col" md:break-words />
               </button>