From e53f651fbb8db7373b3ed053dd9a28c2b44ad0c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sat, 6 Apr 2024 05:58:50 +0200
Subject: [PATCH] fix(ui,a11y): focus lost when navigating using the keyboard
 (tab) (#2766)

---
 components/account/AccountBotIndicator.vue     |  2 +-
 .../account/AccountFollowRequestButton.vue     |  4 ++--
 components/account/AccountHeader.vue           |  2 +-
 components/account/AccountHoverWrapper.vue     |  1 +
 components/account/AccountLockIndicator.vue    |  2 +-
 components/account/TagHoverWrapper.vue         |  1 +
 components/common/CommonRouteTabs.vue          |  2 +-
 components/common/CommonTooltip.vue            |  1 +
 components/list/Account.vue                    |  1 -
 components/list/ListEntry.vue                  | 10 +++++-----
 components/publish/PublishWidget.vue           | 18 +++++++++---------
 components/status/StatusCard.vue               |  2 +-
 pages/[[server]]/lists.vue                     |  2 +-
 .../__snapshots__/content-rich.test.ts.snap    |  6 ++++++
 14 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/components/account/AccountBotIndicator.vue b/components/account/AccountBotIndicator.vue
index d4409539..9dd3a93a 100644
--- a/components/account/AccountBotIndicator.vue
+++ b/components/account/AccountBotIndicator.vue
@@ -11,7 +11,7 @@ defineProps<{
     text-secondary-light
   >
     <slot name="prepend" />
-    <CommonTooltip no-auto-focus :content="$t('account.bot')" :disabled="showLabel">
+    <CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
       <div i-mdi:robot-outline />
     </CommonTooltip>
     <div v-if="showLabel">
diff --git a/components/account/AccountFollowRequestButton.vue b/components/account/AccountFollowRequestButton.vue
index 43ec28d5..8739326f 100644
--- a/components/account/AccountFollowRequestButton.vue
+++ b/components/account/AccountFollowRequestButton.vue
@@ -38,7 +38,7 @@ async function rejectFollowRequest() {
 <template>
   <div flex gap-4>
     <template v-if="relationship?.requestedBy">
-      <CommonTooltip :content="$t('account.authorize')" no-auto-focus>
+      <CommonTooltip :content="$t('account.authorize')">
         <button
           type="button"
           rounded-full text-sm p2 border-1
@@ -48,7 +48,7 @@ async function rejectFollowRequest() {
           <span block text-current i-ri:check-fill />
         </button>
       </CommonTooltip>
-      <CommonTooltip :content="$t('account.reject')" no-auto-focus>
+      <CommonTooltip :content="$t('account.reject')">
         <button
           type="button"
           rounded-full text-sm p2 border-1
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 01d16e04..03b7c721 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -196,7 +196,7 @@ async function copyAccountName() {
 
           <div flex items-center gap-1>
             <AccountHandle :account="account" overflow-unset line-clamp-unset />
-            <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
+            <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
               <button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
                 <span sr-only>{{ $t('account.copy_account_name') }}</span>
               </button>
diff --git a/components/account/AccountHoverWrapper.vue b/components/account/AccountHoverWrapper.vue
index 36f63e2b..e91f6ad1 100644
--- a/components/account/AccountHoverWrapper.vue
+++ b/components/account/AccountHoverWrapper.vue
@@ -58,6 +58,7 @@ const userSettings = useUserSettings()
       :delay="{ show: 500, hide: 100 }"
       v-bind="$attrs"
       :close-on-content-click="false"
+      no-auto-focus
     >
       <slot />
       <template #popper>
diff --git a/components/account/AccountLockIndicator.vue b/components/account/AccountLockIndicator.vue
index 4d6cb263..39a5c035 100644
--- a/components/account/AccountLockIndicator.vue
+++ b/components/account/AccountLockIndicator.vue
@@ -13,7 +13,7 @@ const { t } = useI18n()
     text-secondary-light
   >
     <slot name="prepend" />
-    <CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
+    <CommonTooltip content="Lock" :disabled="showLabel">
       <div i-ri:lock-line />
     </CommonTooltip>
     <div v-if="showLabel">
diff --git a/components/account/TagHoverWrapper.vue b/components/account/TagHoverWrapper.vue
index b4764a77..28f8efb6 100644
--- a/components/account/TagHoverWrapper.vue
+++ b/components/account/TagHoverWrapper.vue
@@ -33,6 +33,7 @@ const userSettings = useUserSettings()
       :delay="{ show: 500, hide: 100 }"
       v-bind="$attrs"
       :close-on-content-click="false"
+      no-auto-focus
     >
       <slot />
       <template #popper>
diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index 42c5a47f..f263d39c 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -46,7 +46,7 @@ useCommands(() => command
     </template>
     <template v-if="isHydrated && moreOptions?.options?.length">
       <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
-        <CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
+        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
           <button
             cursor-pointer
             flex
diff --git a/components/common/CommonTooltip.vue b/components/common/CommonTooltip.vue
index da95750b..c5855c6e 100644
--- a/components/common/CommonTooltip.vue
+++ b/components/common/CommonTooltip.vue
@@ -13,6 +13,7 @@ defineProps<Props>()
     v-if="isHydrated"
     v-bind="$attrs"
     auto-hide
+    no-auto-focus
   >
     <slot />
     <template #popper>
diff --git a/components/list/Account.vue b/components/list/Account.vue
index 06aa9e6f..e0031665 100644
--- a/components/list/Account.vue
+++ b/components/list/Account.vue
@@ -39,7 +39,6 @@ async function edit() {
       <CommonTooltip
         :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
         :hover="isRemoved ? 'text-green' : 'text-red'"
-        no-auto-focus
       >
         <button
           text-sm p2 border-1 transition-colors
diff --git a/components/list/ListEntry.vue b/components/list/ListEntry.vue
index 874475cc..ef7ead4a 100644
--- a/components/list/ListEntry.vue
+++ b/components/list/ListEntry.vue
@@ -113,7 +113,7 @@ onDeactivated(cancelEdit)
       bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
       items-center relative focus-within:box-shadow-outline gap-3
     >
-      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus>
+      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
         <button
           type="button"
           rounded-full text-sm p2 transition-colors
@@ -136,7 +136,7 @@ onDeactivated(cancelEdit)
       {{ form.title }}
     </NuxtLink>
     <div mr4 flex gap2>
-      <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
+      <CommonTooltip v-if="isEditing" :content="$t('list.save')">
         <button
           type="submit"
           text-sm p2 border-1 transition-colors
@@ -152,7 +152,7 @@ onDeactivated(cancelEdit)
           </template>
         </button>
       </CommonTooltip>
-      <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
+      <CommonTooltip v-else :content="$t('list.edit')">
         <button
           ref="editBtn"
           type="button"
@@ -164,7 +164,7 @@ onDeactivated(cancelEdit)
           <span block text-current i-ri:edit-2-line class="rtl-flip" />
         </button>
       </CommonTooltip>
-      <CommonTooltip :content="$t('list.delete')" no-auto-focus>
+      <CommonTooltip :content="$t('list.delete')">
         <button
           type="button"
           text-sm p2 border-1 transition-colors
@@ -192,7 +192,7 @@ onDeactivated(cancelEdit)
         <div aria-hidden="true" i-ri:error-warning-fill />
         <p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
       </div>
-      <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+      <CommonTooltip placement="bottom" :content="$t('list.clear_error')">
         <button
           flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
           @click="clearError"
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index f5e2ded6..1280321d 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -389,26 +389,26 @@ onDeactivated(() => {
             </button>
           </PublishEmojiPicker>
 
-          <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
+          <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')">
             <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
               <div i-ri:image-add-line />
             </button>
           </CommonTooltip>
 
           <template v-if="draft.attachments.length === 0">
-            <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
+            <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')">
               <button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
                 <div i-ri:chat-poll-line />
               </button>
             </CommonTooltip>
             <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
-              <CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
+              <CommonTooltip placement="top" :content="$t('polls.cancel')">
                 <button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
                   <div i-ri:close-line />
                 </button>
               </CommonTooltip>
               <CommonDropdown placement="top">
-                <CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
+                <CommonTooltip placement="top" :content="$t('polls.settings')">
                   <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
                     <div i-ri:list-settings-line />
                     <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@@ -422,7 +422,7 @@ onDeactivated(() => {
                 </template>
               </CommonDropdown>
               <CommonDropdown placement="bottom">
-                <CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
+                <CommonTooltip placement="top" :content="$t('polls.expiration')">
                   <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
                     <div i-ri:hourglass-line />
                     <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@@ -447,7 +447,7 @@ onDeactivated(() => {
 
           <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
 
-          <CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
+          <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
             <CommonDropdown placement="bottom" auto-boundary-max-size>
               <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
                 <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
@@ -461,7 +461,7 @@ onDeactivated(() => {
             </CommonDropdown>
           </CommonTooltip>
 
-          <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
+          <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
             <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 />
@@ -477,7 +477,7 @@ onDeactivated(() => {
             </template>
           </PublishVisibilityPicker>
 
-          <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
+          <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
             <button
               btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
             >
@@ -488,7 +488,7 @@ onDeactivated(() => {
             </button>
           </CommonTooltip>
 
-          <CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
+          <CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)">
             <button
               btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
               md:w-fit
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 74e4059e..76cd88d1 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -160,7 +160,7 @@ const forceShow = ref(false)
               <div flex="~ gap1" items-center>
                 <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
                 <div flex>
-                  <CommonTooltip :content="createdAt" no-auto-focus>
+                  <CommonTooltip :content="createdAt">
                     <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
                       <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
                         {{ timeago }}
diff --git a/pages/[[server]]/lists.vue b/pages/[[server]]/lists.vue
index 15459b8c..f6d416f9 100644
--- a/pages/[[server]]/lists.vue
+++ b/pages/[[server]]/lists.vue
@@ -129,7 +129,7 @@ onDeactivated(() => clearError(false))
                 <div aria-hidden="true" i-ri:error-warning-fill />
                 <p>{{ $t('list.error') }}</p>
               </div>
-              <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+              <CommonTooltip placement="bottom" :content="$t('list.clear_error')">
                 <button
                   flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
                   @click="clearError(true)"
diff --git a/tests/nuxt/__snapshots__/content-rich.test.ts.snap b/tests/nuxt/__snapshots__/content-rich.test.ts.snap
index e9d3f6e7..74f93d14 100644
--- a/tests/nuxt/__snapshots__/content-rich.test.ts.snap
+++ b/tests/nuxt/__snapshots__/content-rich.test.ts.snap
@@ -185,6 +185,7 @@ exports[`content-rich > hashtag adds bdi 1`] = `
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
@@ -206,6 +207,7 @@ exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
@@ -328,6 +330,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
@@ -341,6 +344,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
@@ -388,6 +392,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
@@ -401,6 +406,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
       placement="bottom-start"
       class="inline-block"
       close-on-content-click="false"
+      no-auto-focus
       ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"