From 746aaec699ee416254ee70189c6441fec43f93e8 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 9 May 2023 01:29:04 +0800
Subject: [PATCH] feat: support tab key navigation (experiment)

---
 src/components/VideoCard.vue                  |  5 +-
 .../views/Anime/components/AnimeCard.vue      |  2 +-
 .../views/Anime/components/AnimeTimeTable.vue |  4 +-
 src/contentScripts/views/App.vue              | 32 ++++++-------
 src/contentScripts/views/History/History.vue  | 46 ++++++++++---------
 .../views/WatchLater/WatchLater.vue           | 17 ++++---
 src/styles/main.scss                          |  6 +++
 7 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index 2bd66629..5fd39c08 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -155,7 +155,7 @@ function toggleWatchLater() {
     </div>
 
     <div>
-      <a cursor-pointer @click="openLinkToNewTab(videoUrl)">
+      <a cursor-pointer :href="videoUrl" target="_blank" tabindex="-1" @click.stop="">
         <div w="full" relative bg="$bew-fill-4" rounded="$bew-radius">
           <!-- Video duration -->
           <div
@@ -204,7 +204,8 @@ function toggleWatchLater() {
             v-if="authorFace"
             m="r-4" w="48px" h="48px" rounded="$bew-radius" overflow="hidden" object="center cover"
             bg="$bew-fill-4" cursor="pointer"
-            @click="gotoChannel(mid ?? 0)"
+            :href="`//space.bilibili.com/${mid}`" target="_blank"
+            @click.stop=""
           >
             <img
               :src="`${removeHttpFromUrl(authorFace)}@60w_60h_1c`"
diff --git a/src/contentScripts/views/Anime/components/AnimeCard.vue b/src/contentScripts/views/Anime/components/AnimeCard.vue
index 17956582..cbe5e951 100644
--- a/src/contentScripts/views/Anime/components/AnimeCard.vue
+++ b/src/contentScripts/views/Anime/components/AnimeCard.vue
@@ -18,7 +18,7 @@ defineProps<{
     <a
       rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-3" relative
       class="group"
-      :href="url" target="_blank"
+      :href="url" target="_blank" tabindex="-1"
     >
       <div
         v-if="rank"
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index 7b3548c3..72c6331a 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -124,13 +124,13 @@ function getAnimeTimeTable() {
               <div flex gap-4>
                 <a
                   :href="`//www.bilibili.com/bangumi/play/ss${episode.season_id}`"
-                  target="_blank"
+                  target="_blank" tabindex="-1"
                   shrink-0
                 >
                   <img
                     :src="`${removeHttpFromUrl(
                       episode.square_cover,
-                    )}@300w_300h.webp`"
+                    )}@80w_80h.webp`"
                     :alt="episode.title"
                     w-18
                     aspect="square"
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 921e8e48..7691af8a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -167,53 +167,53 @@ function setAppAppearance() {
             style="backdrop-filter: var(--bew-filter-glass)"
           >
             <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
-              <div
+              <button
                 class="dock-item"
                 :class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
                 @click="changeActivatePage(AppPage.Search)"
               >
                 <tabler:search />
-              </div>
+              </button>
             </Tooltip>
 
             <Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
-              <div
+              <button
                 class="dock-item"
                 :class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
                 @click="changeActivatePage(AppPage.Home)"
               >
                 <tabler:home />
-              </div>
+              </button>
             </Tooltip>
 
             <Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
-              <div
+              <button
                 class="dock-item"
                 :class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
                 @click="changeActivatePage(AppPage.Anime)"
               >
                 <tabler:device-tv />
-              </div>
+              </button>
             </Tooltip>
 
             <Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
-              <div
+              <button
                 class="dock-item"
                 :class="{ active: activatedPage === AppPage.History && !isVideoPage }"
                 @click="changeActivatePage(AppPage.History)"
               >
                 <tabler:clock />
-              </div>
+              </button>
             </Tooltip>
 
             <Tooltip content="Watch later" :placement="tooltipPlacement">
-              <div
+              <button
                 class="dock-item"
                 :class="{ active: activatedPage === AppPage.WatchLater && !isVideoPage }"
                 @click="changeActivatePage(AppPage.WatchLater)"
               >
                 <iconoir:playlist-play />
-              </div>
+              </button>
             </Tooltip>
 
             <!-- <div
@@ -229,25 +229,25 @@ function setAppAppearance() {
               <div class="divider" />
 
               <!-- video page -->
-              <div class="dock-item video active">
+              <button class="dock-item video active">
                 <tabler:player-play />
-              </div>
+              </button>
             </template>
 
             <!-- dividing line -->
             <div class="divider" />
 
             <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
-              <div class="dock-item" @click="toggleDark()">
+              <button class="dock-item" @click="toggleDark()">
                 <tabler:moon-stars v-if="isDark" />
                 <tabler:sun v-else />
-              </div>
+              </button>
             </Tooltip>
 
             <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
-              <div class="dock-item" @click="toggle()">
+              <button class="dock-item" @click="toggle()">
                 <tabler:settings />
-              </div>
+              </button>
             </Tooltip>
           </div>
         </aside>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 09f71601..768f27c1 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -388,19 +388,21 @@ function jumpToLoginPage() {
             <!-- Description -->
             <div flex justify-between w-full>
               <div flex="~ col">
-                <h3
-                  class="keep-two-lines"
-                  overflow="hidden"
-                  text="lg overflow-ellipsis"
-                >
-                  {{
-                    historyItem.show_title
-                      ? historyItem.show_title
-                      : historyItem.title
-                  }}
-                </h3>
-                <div
-                  text="$bew-text-2 sm"
+                <a :href="`${getHistoryUrl(historyItem)}`" target="_blank" @click.stop="">
+                  <h3
+                    class="keep-two-lines"
+                    overflow="hidden"
+                    text="lg overflow-ellipsis"
+                  >
+                    {{
+                      historyItem.show_title
+                        ? historyItem.show_title
+                        : historyItem.title
+                    }}
+                  </h3>
+                </a>
+                <a
+                  un-text="$bew-text-2 sm"
                   m="t-4 b-2"
                   flex="~"
                   items-center
@@ -411,19 +413,19 @@ function jumpToLoginPage() {
                   hover:bg="$bew-theme-color-10"
                   duration-300
                   pr-2
-                  @click.stop="
-                    openLinkToNewTab(
-                      historyItem.author_mid
-                        ? `https://space.bilibili.com/${historyItem.author_mid}`
-                        : historyItem.uri,
-                    )
+                  :href="
+                    historyItem.author_mid
+                      ? `https://space.bilibili.com/${historyItem.author_mid}`
+                      : historyItem.uri
                   "
+                  target="_blank"
+                  @click.stop=""
                 >
                   <img
                     :src="
-                      `${historyItem.author_face
+                      removeHttpFromUrl(`${historyItem.author_face
                         ? historyItem.author_face
-                        : historyItem.cover}@80w_80h_1c`
+                        : historyItem.cover}@80w_80h_1c`)
                     "
                     w-30px
                     aspect-square
@@ -447,7 +449,7 @@ function jumpToLoginPage() {
                   ><tabler:live-photo />
                     Live
                   </span>
-                </div>
+                </a>
                 <p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
                   {{
                     useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 889e0ba9..e9737bd2 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -172,15 +172,17 @@ function jumpToLoginPage() {
             <!-- Description -->
             <div flex justify-between w-full>
               <div flex="~ col">
-                <h3
+                <a
                   class="keep-two-lines"
                   overflow="hidden"
-                  text="lg overflow-ellipsis"
+                  un-text="lg overflow-ellipsis"
+                  :href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
+                  @click.stop=""
                 >
                   {{ item.title }}
-                </h3>
-                <div
-                  text="$bew-text-2 sm"
+                </a>
+                <a
+                  un-text="$bew-text-2 sm"
                   m="t-4 b-2"
                   flex="~"
                   items-center
@@ -191,7 +193,8 @@ function jumpToLoginPage() {
                   hover:bg="$bew-theme-color-10"
                   duration-300
                   pr-2
-                  @click.stop="openLinkToNewTab(`https://space.bilibili.com/${item.owner.mid}`)"
+                  :href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
+                  @click.stop=""
                 >
                   <img
                     :src="removeHttpFromUrl(`${item.owner.face}@80w_80h_1c`)"
@@ -203,7 +206,7 @@ function jumpToLoginPage() {
                     mr-2
                   >
                   {{ item.owner.name }}
-                </div>
+                </a>
                 <p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
                   {{
                     useDateFormat(item.pubdate * 1000, 'YYYY-MM-DD HH:mm:ss')
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 15288259..231705c1 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,9 @@
+* {
+  outline-color: var(--bew-theme-color-80);
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
 .dark * {
   color-scheme: dark;
 }