feat(a11y): make menu buttons in 'More' dropdown selectable with the …

…keyboard (#2976) Co-authored-by: userquin <[email protected]>
elk-zone · Oct 21, 2024 · dac42e0 · dac42e0
1 parent ae1da4c
commit dac42e0
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
@@ -71,6 +71,7 @@ async function removeUserNote() {
         />
       </NuxtLink>
       <CommonDropdownItem
+        is="button"
         v-if="isShareSupported"
         :text="$t('menu.share_account', [`@${account.acct}`])"
         icon="i-ri:share-line"
@@ -81,26 +82,30 @@ async function removeUserNote() {
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
             @click="mentionUser(account)"
           />
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
             @click="directMessageUser(account)"
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.showingReblogs"
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
@@ -109,13 +114,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.note || relationship?.note?.length === 0"
             :text="$t('menu.add_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
             @click="addUserNote()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -124,13 +131,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
             :command="command"
             @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
@@ -139,13 +148,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
             @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
@@ -155,13 +166,15 @@ async function removeUserNote() {
 
           <template v-if="getServerName(account) !== currentServer">
             <CommonDropdownItem
+              is="button"
               v-if="!relationship?.domainBlocking"
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
               @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
@@ -171,6 +184,7 @@ async function removeUserNote() {
           </template>
 
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"

diff --git a/components/common/dropdown/DropdownItem.vue b/components/common/dropdown/DropdownItem.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const {
+  is = 'div',
+  text,
+  description,
+  icon,
+  checked,
+  command,
+} = defineProps<{
   is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>(), {
-  is: 'div',
-})
+}>()
+
 const emit = defineEmits(['click'])
 
+const type = computed(() => is === 'button' ? 'button' : null)
+
 const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
@@ -24,11 +32,11 @@ useCommand({
   scope: 'Actions',
 
   order: -1,
-  visible: () => props.command && props.text,
+  visible: () => command && text,
 
-  name: () => props.text!,
-  icon: () => props.icon ?? 'i-ri:question-line',
-  description: () => props.description,
+  name: () => text!,
+  icon: () => icon ?? 'i-ri:question-line',
+  description: () => description,
 
   onActivate() {
     const clickEvent = new MouseEvent('click', {
@@ -46,6 +54,7 @@ useCommand({
     v-bind="$attrs"
     :is="is"
     ref="el"
+    :type="type"
     w-full
     flex gap-3 items-center cursor-pointer px4 py3
     select-none

diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
@@ -146,13 +146,15 @@ function showFavoritedAndBoostedBy() {
       <div flex="~ col">
         <template v-if="getPreferences(userSettings, 'zenMode') && !details">
           <CommonDropdownItem
+            is="button"
             :text="$t('action.reply')"
             icon="i-ri:chat-1-line"
             :command="command"
             @click="reply()"
           />
 
           <CommonDropdownItem
+            is="button"
             :text="status.reblogged ? $t('action.boosted') : $t('action.boost')"
             icon="i-ri:repeat-fill"
             :class="status.reblogged ? 'text-green' : ''"
@@ -162,6 +164,7 @@ function showFavoritedAndBoostedBy() {
           />
 
           <CommonDropdownItem
+            is="button"
             :text="status.favourited ? $t('action.favourited') : $t('action.favourite')"
             :icon="useStarFavoriteIcon
               ? status.favourited ? 'i-ri:star-fill' : 'i-ri:star-line'
@@ -176,6 +179,7 @@ function showFavoritedAndBoostedBy() {
           />
 
           <CommonDropdownItem
+            is="button"
             :text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')"
             :icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'"
             :class="status.bookmarked
@@ -189,27 +193,31 @@ function showFavoritedAndBoostedBy() {
         </template>
 
         <CommonDropdownItem
+          is="button"
           :text="$t('menu.show_favourited_and_boosted_by')"
           icon="i-ri:hearts-line"
           :command="command"
           @click="showFavoritedAndBoostedBy()"
         />
 
         <CommonDropdownItem
+          is="button"
           :text="$t('menu.copy_link_to_post')"
           icon="i-ri:link"
           :command="command"
           @click="copyLink(status)"
         />
 
         <CommonDropdownItem
+          is="button"
           :text="$t('menu.copy_original_link_to_post')"
           icon="i-ri:links-fill"
           :command="command"
           @click="copyOriginalLink(status)"
         />
 
         <CommonDropdownItem
+          is="button"
           v-if="isShareSupported"
           :text="$t('menu.share_post')"
           icon="i-ri:share-line"
@@ -218,6 +226,7 @@ function showFavoritedAndBoostedBy() {
         />
 
         <CommonDropdownItem
+          is="button"
           v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some(m => m.id === currentUser!.account.id))"
           :text="status.muted ? $t('menu.unmute_conversation') : $t('menu.mute_conversation')"
           :icon="status.muted ? 'i-ri:eye-line' : 'i-ri:eye-off-line'"
@@ -237,20 +246,23 @@ function showFavoritedAndBoostedBy() {
         <template v-if="isHydrated && currentUser">
           <template v-if="isAuthor">
             <CommonDropdownItem
+              is="button"
               :text="status.pinned ? $t('menu.unpin_on_profile') : $t('menu.pin_on_profile')"
               icon="i-ri:pushpin-line"
               :command="command"
               @click="togglePin"
             />
 
             <CommonDropdownItem
+              is="button"
               :text="$t('menu.edit')"
               icon="i-ri:edit-line"
               :command="command"
               @click="editStatus"
             />
 
             <CommonDropdownItem
+              is="button"
               :text="$t('menu.delete')"
               icon="i-ri:delete-bin-line"
               text-red-600
@@ -259,6 +271,7 @@ function showFavoritedAndBoostedBy() {
             />
 
             <CommonDropdownItem
+              is="button"
               :text="$t('menu.delete_and_redraft')"
               icon="i-ri:eraser-line"
               text-red-600
@@ -268,20 +281,23 @@ function showFavoritedAndBoostedBy() {
           </template>
           <template v-else>
             <CommonDropdownItem
+              is="button"
               :text="$t('menu.mention_account', [`@${status.account.acct}`])"
               icon="i-ri:at-line"
               :command="command"
               @click="mentionUser(status.account)"
             />
 
             <CommonDropdownItem
+              is="button"
               v-if="!useRelationship(status.account).value?.muting"
               :text="$t('menu.mute_account', [`@${status.account.acct}`])"
               icon="i-ri:volume-mute-line"
               :command="command"
               @click="toggleMuteAccount(useRelationship(status.account).value!, status.account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unmute_account', [`@${status.account.acct}`])"
               icon="i-ri:volume-up-fill"
@@ -290,13 +306,15 @@ function showFavoritedAndBoostedBy() {
             />
 
             <CommonDropdownItem
+              is="button"
               v-if="!useRelationship(status.account).value?.blocking"
               :text="$t('menu.block_account', [`@${status.account.acct}`])"
               icon="i-ri:forbid-2-line"
               :command="command"
               @click="toggleBlockAccount(useRelationship(status.account).value!, status.account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_account', [`@${status.account.acct}`])"
               icon="i-ri:checkbox-circle-line"
@@ -306,13 +324,15 @@ function showFavoritedAndBoostedBy() {
 
             <template v-if="getServerName(status.account) && getServerName(status.account) !== currentServer">
               <CommonDropdownItem
+                is="button"
                 v-if="!useRelationship(status.account).value?.domainBlocking"
                 :text="$t('menu.block_domain', [getServerName(status.account)])"
                 icon="i-ri:shut-down-line"
                 :command="command"
                 @click="toggleBlockDomain(useRelationship(status.account).value!, status.account)"
               />
               <CommonDropdownItem
+                is="button"
                 v-else
                 :text="$t('menu.unblock_domain', [getServerName(status.account)])"
                 icon="i-ri:restart-line"
@@ -322,6 +342,7 @@ function showFavoritedAndBoostedBy() {
             </template>
 
             <CommonDropdownItem
+              is="button"
               :text="$t('menu.report_account', [`@${status.account.acct}`])"
               icon="i-ri:flag-2-line"
               :command="command"