From 59e365591d8301e6d9ab4984c04a22b84a3d3c21 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 29 Nov 2022 21:24:26 +0000
Subject: [PATCH] fix(a11y): add more aria labels

---
 components/account/AccountMoreButton.vue | 2 +-
 components/help/HelpPreview.vue          | 2 +-
 components/modal/ModalDialog.vue         | 2 +-
 components/nav/NavFooter.vue             | 3 ++-
 components/nav/SelectFeatureFlags.vue    | 2 +-
 components/nav/SelectLanguage.vue        | 2 +-
 components/publish/PublishWidget.vue     | 7 ++++---
 components/status/StatusAttachment.vue   | 1 +
 components/tag/TagActionButton.vue       | 1 +
 components/user/UserSwitcher.vue         | 1 +
 layouts/default.vue                      | 1 +
 11 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index eedb4766..5f2f638a 100644
--- a/components/account/AccountMoreButton.vue
+++ b/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>
diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 5b680bb9..28e1742e 100644
--- a/components/help/HelpPreview.vue
+++ b/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>
 
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index 2caa746f..2e3d353d 100644
--- a/components/modal/ModalDialog.vue
+++ b/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>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 3bf11b66..7a4ede52 100644
--- a/components/nav/NavFooter.vue
+++ b/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>
diff --git a/components/nav/SelectFeatureFlags.vue b/components/nav/SelectFeatureFlags.vue
index c2111608..f8d33054 100644
--- a/components/nav/SelectFeatureFlags.vue
+++ b/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>
 
diff --git a/components/nav/SelectLanguage.vue b/components/nav/SelectLanguage.vue
index 427cb6b0..cff4f6cd 100644
--- a/components/nav/SelectLanguage.vue
+++ b/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>
 
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index dbd13363..5f7f941e 100644
--- a/components/publish/PublishWidget.vue
+++ b/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>
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 163ed698..dfa537a2 100644
--- a/components/status/StatusAttachment.vue
+++ b/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!,
diff --git a/components/tag/TagActionButton.vue b/components/tag/TagActionButton.vue
index ba23f508..49020093 100644
--- a/components/tag/TagActionButton.vue
+++ b/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'">
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index b64c6ca5..0fe22e95 100644
--- a/components/user/UserSwitcher.vue
+++ b/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" />
diff --git a/layouts/default.vue b/layouts/default.vue
index 46b4cf56..f0f2fb35 100644
--- a/layouts/default.vue
+++ b/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>