From 990294bb60889e58cd366ac020a5896d5d10ef57 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 18 Jul 2023 00:25:43 +0900
Subject: [PATCH 01/14] =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D?=
 =?UTF-8?q?=E3=83=AB=E4=B8=80=E8=A6=A7=E3=82=92=E3=82=AD=E3=83=BC=E3=83=9C?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E6=93=8D=E4=BD=9C=E5=8F=AF=E8=83=BD=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelElement.vue            | 26 +++++++++++++----
 .../ChannelList/ChannelElementHash.vue        | 28 ++++++++++++-------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index bbfeceaf3..d91bd8e83 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -5,11 +5,16 @@
     :data-is-inactive="$boolAttr(!channel.active)"
   >
     <!-- チャンネル表示本体 -->
-    <div
+    <button
       :class="$style.channel"
+      :aria-selected="isSelected"
+      :data-is-inactive="$boolAttr(!channel.active)"
       @mousedown="openChannel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @click="openChannel"
+      @focus="onFocus"
+      @blur="onBlur"
     >
       <channel-element-hash
         :class="$style.channelHash"
@@ -19,7 +24,7 @@
         :has-notification="notificationState.hasNotification"
         :has-notification-on-child="notificationState.hasNotificationOnChild"
         :is-inactive="!channel.active"
-        @mousedown.stop="onChannelHashClick"
+        @click.stop="onChannelHashClick"
         @mouseenter="onHashMouseEnter"
         @mouseleave="onHashMouseLeave"
       />
@@ -32,7 +37,7 @@
         :is-noticeable="notificationState.isNoticeable"
         :unread-count="notificationState.unreadCount"
       />
-    </div>
+    </button>
 
     <div :class="$style.slot">
       <slot />
@@ -40,9 +45,10 @@
 
     <!-- チャンネルの背景 -->
     <div
-      v-if="isSelected || isChannelBgHovered"
+      v-if="isSelected || isChannelBgHovered || isFocused"
       :class="$style.selectedBg"
       :data-is-hovered="$boolAttr(isChannelBgHovered)"
+      :data-is-focused="$boolAttr(isFocused)"
     />
   </div>
 </template>
@@ -60,6 +66,7 @@ import ChannelElementName from './ChannelElementName.vue'
 import useNotificationState from '../composables/useNotificationState'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useChannelPath from '/@/composables/useChannelPath'
+import useFocus from '/@/components/Main/MainView/MessageInput/composables/useFocus'
 
 const props = withDefaults(
   defineProps<{
@@ -103,6 +110,7 @@ const openChannel = (event: MouseEvent) => {
 const notificationState = useNotificationState(toRef(props, 'channel'))
 
 const { isHovered, onMouseEnter, onMouseLeave } = useHover()
+const { isFocused, onFocus, onBlur } = useFocus()
 const {
   isHovered: isHashHovered,
   onMouseEnter: onHashMouseEnter,
@@ -139,6 +147,13 @@ $bgLeftShift: 8px;
   padding-right: 4px;
   margin-left: $bgLeftShift;
   z-index: 0;
+  width: 100%;
+  &[data-is-inactive] {
+    @include color-ui-secondary;
+  }
+  &[aria-selected='true'] {
+    @include color-accent-primary;
+  }
 }
 .channelHash {
   flex-shrink: 0;
@@ -161,7 +176,8 @@ $bgLeftShift: 8px;
     @include background-accent-primary;
     display: block;
   }
-  &[data-is-hovered] {
+  &[data-is-hovered],
+  &[data-is-focused] {
     display: block;
     background: $theme-ui-primary-background;
   }
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
index f76346354..a2659ad02 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.container">
+  <button :class="$style.container" :tabindex="hasChild ? 0 : -1">
     <div
       :class="$style.hash"
       :data-container-type="hasChild ? 'parent' : 'leaf'"
@@ -13,7 +13,7 @@
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :border-width="2" />
     </div>
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>
@@ -75,7 +75,8 @@ withDefaults(
     }
   }
   &[data-container-type='parent'] {
-    &:hover::before {
+    &:hover::before,
+    .container:focus &::before {
       content: '';
       border-radius: 4px;
       display: block;
@@ -88,19 +89,22 @@ withDefaults(
     &[data-is-opened] {
       color: var(--specific-channel-hash-opened);
       background: $theme-ui-primary-background;
-      &:hover::before {
+      &:hover::before,
+      .container:focus &::before {
         background: $theme-ui-primary-background;
         opacity: 0.5;
       }
       &[data-is-inactive] {
         background: $theme-ui-secondary-background;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           background: $theme-ui-secondary-background;
         }
       }
       &[aria-selected='true'] {
         @include background-accent-primary;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           @include background-accent-primary;
         }
       }
@@ -108,27 +112,31 @@ withDefaults(
     &:not([data-is-opened]) {
       @include color-ui-primary;
       border-color: $theme-ui-primary-default;
-      &:hover::before {
+      &:hover::before,
+      .container:focus &::before {
         background: $theme-ui-primary-background;
         opacity: 0.2;
       }
       &[data-is-inactive] {
         @include color-ui-secondary;
         border-color: $theme-ui-secondary-default;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           background: $theme-ui-secondary-background;
         }
       }
       &[data-has-notification-on-child] {
         border-color: $theme-accent-notification-default;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           background: $theme-accent-notification-background;
         }
       }
       &[aria-selected='true'] {
         @include color-accent-primary;
         border-color: $theme-accent-primary-default;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           @include background-accent-primary;
         }
       }

From c0747809dfe7f0170fa7e42c010a9e2887f2bedc Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 18 Jul 2023 00:31:38 +0900
Subject: [PATCH 02/14] =?UTF-8?q?=E5=B7=A6=E7=AB=AF=E3=81=AE=E3=82=A2?=
 =?UTF-8?q?=E3=82=A4=E3=83=86=E3=83=A0=E7=BE=A4=E3=82=92=E3=83=95=E3=82=A9?=
 =?UTF-8?q?=E3=83=BC=E3=82=AB=E3=82=B9=E5=8F=AF=E8=83=BD=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/NavigationBar/NavigationSelectorItem.vue   |  7 ++++---
 src/components/Main/NavigationBar/ToolItem.vue      | 13 ++++++++-----
 src/components/UI/IconButton.vue                    |  4 ++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Main/NavigationBar/NavigationSelectorItem.vue b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
index 0f732663f..c7bdd8ed8 100644
--- a/src/components/Main/NavigationBar/NavigationSelectorItem.vue
+++ b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div
+  <button
     :class="$style.container"
     :style="containerStyle"
     :aria-selected="isSelected"
@@ -8,7 +8,7 @@
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :size="6" />
     </div>
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>
@@ -64,7 +64,8 @@ const containerStyle = computed(() => ({
     opacity: 0;
   }
   &[aria-selected='true']::after,
-  &:hover::after {
+  &:hover::after,
+  &:focus::after {
     opacity: 0.1;
   }
 }
diff --git a/src/components/Main/NavigationBar/ToolItem.vue b/src/components/Main/NavigationBar/ToolItem.vue
index e2784083b..06f9205f3 100644
--- a/src/components/Main/NavigationBar/ToolItem.vue
+++ b/src/components/Main/NavigationBar/ToolItem.vue
@@ -1,11 +1,13 @@
 <template>
-  <div :class="$style.container">
-    <a-icon :name="iconName" :mdi="iconMdi" :size="24" />
-  </div>
+  <icon-button
+    :icon-name="iconName"
+    :icon-mdi="iconMdi"
+    :class="$style.container"
+  />
 </template>
 
 <script lang="ts" setup>
-import AIcon from '/@/components/UI/AIcon.vue'
+import IconButton from '/@/components/UI/IconButton.vue'
 
 withDefaults(
   defineProps<{
@@ -27,7 +29,8 @@ withDefaults(
   width: 32px;
   height: 32px;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &:focus {
     @include color-ui-secondary;
   }
 }
diff --git a/src/components/UI/IconButton.vue b/src/components/UI/IconButton.vue
index dbc809b66..664f9fbb2 100644
--- a/src/components/UI/IconButton.vue
+++ b/src/components/UI/IconButton.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="$style.container" :title="title" :aria-disabled="disabled">
+  <button :class="$style.container" :title="title" :aria-disabled="disabled">
     <a-icon :class="$style.icon" :mdi="iconMdi" :name="iconName" />
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>

From 277f7dd751c5b7370b721973a790b70a3839dfc5 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 18 Jul 2023 00:55:46 +0900
Subject: [PATCH 03/14] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E4=B8=80=E8=A6=A7=E3=82=92=E3=81=84=E3=81=84=E6=84=9F=E3=81=98?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NavigationContent/UsersGradeList.vue            |  2 +-
 .../NavigationContent/UsersSeparator.vue            |  5 +++--
 src/components/UI/UserIcon.vue                      | 13 +++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Main/NavigationBar/NavigationContent/UsersGradeList.vue b/src/components/Main/NavigationBar/NavigationContent/UsersGradeList.vue
index 30271e7f1..f553dad21 100644
--- a/src/components/Main/NavigationBar/NavigationContent/UsersGradeList.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/UsersGradeList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :aria-expanded="!isFolding">
     <users-separator
       :name="nameWithCount"
       :is-open="!isFolding"
diff --git a/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue b/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
index 87f8067e8..d70ff3622 100644
--- a/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.container" :data-is-open="$boolAttr(isOpen)">
+  <button :class="$style.container" :data-is-open="$boolAttr(isOpen)">
     <div :class="$style.name">
       {{ name }}
       <div v-if="hasNotification" :class="$style.indicator">
@@ -8,7 +8,7 @@
     </div>
     <div :class="$style.line" />
     <a-icon name="rounded-triangle" :class="$style.icon" :size="20" />
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>
@@ -34,6 +34,7 @@ withDefaults(
   @include color-ui-secondary;
   @include size-body2;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
   font-weight: bold;
diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 6251c1046..dedad6f3e 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -1,6 +1,7 @@
 <template>
-  <div
-    :role="isClickable ? 'button' : 'img'"
+  <component
+    :is="isClickable ? 'button' : 'img'"
+    :data-is-clickable="isClickable"
     :class="$style.container"
     :style="styles.container"
     @click.prevent.stop="openModal"
@@ -8,7 +9,7 @@
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :size="indicatorSize" />
     </div>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -88,9 +89,13 @@ const { isClickable, openModal } = useUserModalOpener(
     repeat: no-repeat;
     size: cover;
   }
-  &[role='button'] {
+  &[data-is-clickable='true'] {
     cursor: pointer;
   }
+  &:hover,
+  &:focus {
+    opacity: 0.7;
+  }
 }
 .indicator {
   position: absolute;

From a9e9f4ec7b928f529d0609d707353a2e036db244 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 18 Jul 2023 01:01:04 +0900
Subject: [PATCH 04/14] =?UTF-8?q?channelElementHash=E3=81=AE=E3=82=BF?=
 =?UTF-8?q?=E3=82=B0=E3=81=AE=E5=87=BA=E3=81=97=E5=88=86=E3=81=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/NavigationBar/ChannelList/ChannelElementHash.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
index a2659ad02..dbce4c608 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :class="$style.container" :tabindex="hasChild ? 0 : -1">
+  <component :is="hasChild ? 'button' : 'div'" :class="$style.container">
     <div
       :class="$style.hash"
       :data-container-type="hasChild ? 'parent' : 'leaf'"
@@ -13,7 +13,7 @@
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :border-width="2" />
     </div>
-  </button>
+  </component>
 </template>
 
 <script lang="ts" setup>

From 63f5d681664fa5323a6149ad3be56fb110eb19d1 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Jul 2023 21:58:48 +0900
Subject: [PATCH 05/14] =?UTF-8?q?aria-selected=E5=91=A8=E3=82=8A=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NavigationBar/ChannelList/ChannelElement.vue   | 14 +++++++-------
 .../ChannelList/ChannelElementHash.vue             |  8 ++++----
 .../ChannelList/ChannelListSelector.vue            |  2 +-
 .../NavigationBar/DesktopNavigationSelector.vue    |  2 +-
 .../Main/NavigationBar/NavigationSelectorItem.vue  |  1 +
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index d91bd8e83..eb14c2aa0 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     :class="$style.container"
-    :aria-selected="isSelected"
+    :data-is-selected="$boolAttr(isSelected)"
     :data-is-inactive="$boolAttr(!channel.active)"
   >
     <!-- チャンネル表示本体 -->
     <button
       :class="$style.channel"
-      :aria-selected="isSelected"
+      :aria-current="isSelected && 'page'"
+      :aria-expanded="hasChildren && isOpened"
       :data-is-inactive="$boolAttr(!channel.active)"
-      @mousedown="openChannel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
       @click="openChannel"
@@ -135,7 +135,7 @@ $bgLeftShift: 8px;
   &[data-is-inactive] {
     @include color-ui-secondary;
   }
-  &[aria-selected='true'] {
+  &[data-is-selected] {
     @include color-accent-primary;
   }
 }
@@ -147,11 +147,11 @@ $bgLeftShift: 8px;
   padding-right: 4px;
   margin-left: $bgLeftShift;
   z-index: 0;
-  width: 100%;
+  width: calc(100% - $bgLeftShift);
   &[data-is-inactive] {
     @include color-ui-secondary;
   }
-  &[aria-selected='true'] {
+  &[aria-current='page'] {
     @include color-accent-primary;
   }
 }
@@ -172,7 +172,7 @@ $bgLeftShift: 8px;
   pointer-events: none;
 
   display: none;
-  .container[aria-selected='true'] > & {
+  .container[aria-current='page'] > & {
     @include background-accent-primary;
     display: block;
   }
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
index dbce4c608..8f0c210f0 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -4,7 +4,7 @@
       :class="$style.hash"
       :data-container-type="hasChild ? 'parent' : 'leaf'"
       :data-is-opened="$boolAttr(hasChild && isOpened)"
-      :aria-selected="isSelected"
+      :data-is-selected="$boolAttr(isSelected)"
       :data-has-notification-on-child="$boolAttr(hasNotificationOnChild)"
       :data-is-inactive="$boolAttr(isInactive)"
     >
@@ -70,7 +70,7 @@ withDefaults(
       @include color-ui-secondary;
       border-color: $theme-ui-secondary-default;
     }
-    &[aria-selected='true'] {
+    &[data-is-selected='true'] {
       @include color-accent-primary;
     }
   }
@@ -101,7 +101,7 @@ withDefaults(
           background: $theme-ui-secondary-background;
         }
       }
-      &[aria-selected='true'] {
+      &[data-is-selected='true'] {
         @include background-accent-primary;
         &:hover::before,
         .container:focus &::before {
@@ -132,7 +132,7 @@ withDefaults(
           background: $theme-accent-notification-background;
         }
       }
-      &[aria-selected='true'] {
+      &[data-is-selected='true'] {
         @include color-accent-primary;
         border-color: $theme-accent-primary-default;
         &:hover::before,
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue b/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
index 496922922..1bee5d350 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.container">
+  <div :class="$style.container" role="tablist">
     <a-tab
       label="すべて"
       :aria-selected="!isStared"
diff --git a/src/components/Main/NavigationBar/DesktopNavigationSelector.vue b/src/components/Main/NavigationBar/DesktopNavigationSelector.vue
index 2e47438d2..156357b5d 100644
--- a/src/components/Main/NavigationBar/DesktopNavigationSelector.vue
+++ b/src/components/Main/NavigationBar/DesktopNavigationSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.container">
+  <div :class="$style.container" role="tablist">
     <popup-navigator :class="$style.logo" :title="`traQ ${VERSION}`" />
     <navigation-selector-item
       v-for="item in entries"
diff --git a/src/components/Main/NavigationBar/NavigationSelectorItem.vue b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
index c7bdd8ed8..8fe511201 100644
--- a/src/components/Main/NavigationBar/NavigationSelectorItem.vue
+++ b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
@@ -3,6 +3,7 @@
     :class="$style.container"
     :style="containerStyle"
     :aria-selected="isSelected"
+    role="tab"
   >
     <a-icon :class="$style.icon" :name="iconName" :mdi="iconMdi" :size="24" />
     <div v-if="hasNotification" :class="$style.indicator">

From b1817f2628435b1feaacf1d2194a79785a242e29 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Jul 2023 22:51:58 +0900
Subject: [PATCH 06/14] =?UTF-8?q?aria-label=E3=81=A4=E3=81=91=E3=81=9F?=
 =?UTF-8?q?=E3=82=8A=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=E3=82=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelElement.vue            | 11 +++-
 .../ChannelList/ChannelElementHash.vue        | 12 +++-
 .../ChannelList/ChannelElementName.vue        | 55 ++-----------------
 .../ChannelList/composables/usePath.ts        | 48 ++++++++++++++++
 4 files changed, 72 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Main/NavigationBar/ChannelList/composables/usePath.ts

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index eb14c2aa0..69fd913ef 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -8,8 +8,9 @@
     <button
       :class="$style.channel"
       :aria-current="isSelected && 'page'"
-      :aria-expanded="hasChildren && isOpened"
+      :aria-expanded="hasChildren && isOpened ? true : undefined"
       :data-is-inactive="$boolAttr(!channel.active)"
+      :aria-label="showShortenedPath ? pathTooltip : pathToShow"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
       @click="openChannel"
@@ -67,6 +68,10 @@ import useNotificationState from '../composables/useNotificationState'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useChannelPath from '/@/composables/useChannelPath'
 import useFocus from '/@/components/Main/MainView/MessageInput/composables/useFocus'
+import {
+  usePath,
+  type TypedProps
+} from '/@/components/Main/NavigationBar/ChannelList/composables/usePath'
 
 const props = withDefaults(
   defineProps<{
@@ -107,6 +112,8 @@ const openChannel = (event: MouseEvent) => {
   openLink(event, channelIdToLink(props.channel.id))
 }
 
+const { pathToShow, pathTooltip } = usePath(props as TypedProps)
+
 const notificationState = useNotificationState(toRef(props, 'channel'))
 
 const { isHovered, onMouseEnter, onMouseLeave } = useHover()
@@ -172,7 +179,7 @@ $bgLeftShift: 8px;
   pointer-events: none;
 
   display: none;
-  .container[aria-current='page'] > & {
+  .container[data-is-selected] > & {
     @include background-accent-primary;
     display: block;
   }
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
index 8f0c210f0..6fabfee5d 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -1,5 +1,15 @@
 <template>
-  <component :is="hasChild ? 'button' : 'div'" :class="$style.container">
+  <component
+    :is="hasChild ? 'button' : 'div'"
+    :class="$style.container"
+    :aria-label="
+      hasChild && !isOpened
+        ? 'チャンネルツリーを展開'
+        : hasChild && isOpened
+        ? 'チャンネルツリーを閉じる'
+        : undefined
+    "
+  >
     <div
       :class="$style.hash"
       :data-container-type="hasChild ? 'parent' : 'leaf'"
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
index 887489468..b9968fd7a 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
@@ -19,60 +19,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, reactive } from 'vue'
-import useChannelPath from '/@/composables/useChannelPath'
-import { useQallSession } from '../../MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession'
-import type { ChannelTreeNode } from '/@/lib/channelTree'
-import type { Channel } from '@traptitech/traq'
-
-interface TreeProps {
-  channel: ChannelTreeNode
-  showShortenedPath: false
-}
-
-interface ListProps {
-  channel: Channel
-  showShortenedPath: true
-}
-
-type TypedProps = TreeProps | ListProps
-
-const usePath = (typedProps: TypedProps) => {
-  const { channelIdToShortPathString, channelIdToPathString } = useChannelPath()
-
-  const getPathWithAncestor = (skippedAncestorNames?: string[]) =>
-    skippedAncestorNames
-      ? [...skippedAncestorNames].reverse().join('/').concat('/')
-      : ''
-
-  const pathToShow = computed(() =>
-    typedProps.showShortenedPath
-      ? channelIdToShortPathString(typedProps.channel.id)
-      : getPathWithAncestor(typedProps.channel.skippedAncestorNames) +
-        typedProps.channel.name
-  )
-  const pathTooltip = computed(() =>
-    typedProps.showShortenedPath
-      ? `#${channelIdToPathString(typedProps.channel.id)}`
-      : undefined
-  )
-
-  return { pathToShow, pathTooltip }
-}
-
-const useRTCState = (typedProps: TypedProps) => {
-  const { sessionUserIds } = useQallSession(
-    reactive({ channelId: computed(() => typedProps.channel.id) })
-  )
-
-  return { qallUserIds: sessionUserIds }
-}
-</script>
-
 <script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
 import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
+import type { ChannelTreeNode } from '/@/lib/channelTree'
+import type { Channel } from '@traptitech/traq'
+import type { TypedProps } from './composables/usePath'
+import { usePath, useRTCState } from './composables/usePath'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts b/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts
new file mode 100644
index 000000000..ff91c463a
--- /dev/null
+++ b/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts
@@ -0,0 +1,48 @@
+import type { Channel } from '@traptitech/traq'
+import { computed, reactive } from 'vue'
+import { useQallSession } from '/@/components/Main/MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession'
+import useChannelPath from '/@/composables/useChannelPath'
+import type { ChannelTreeNode } from '/@/lib/channelTree'
+
+interface TreeProps {
+  channel: ChannelTreeNode
+  showShortenedPath: false
+}
+
+interface ListProps {
+  channel: Channel
+  showShortenedPath: true
+}
+
+export type TypedProps = TreeProps | ListProps
+
+export const usePath = (typedProps: TypedProps) => {
+  const { channelIdToShortPathString, channelIdToPathString } = useChannelPath()
+
+  const getPathWithAncestor = (skippedAncestorNames?: string[]) =>
+    skippedAncestorNames
+      ? [...skippedAncestorNames].reverse().join('/').concat('/')
+      : ''
+
+  const pathToShow = computed(() =>
+    typedProps.showShortenedPath
+      ? channelIdToShortPathString(typedProps.channel.id)
+      : getPathWithAncestor(typedProps.channel.skippedAncestorNames) +
+        typedProps.channel.name
+  )
+  const pathTooltip = computed(() =>
+    typedProps.showShortenedPath
+      ? `#${channelIdToPathString(typedProps.channel.id)}`
+      : undefined
+  )
+
+  return { pathToShow, pathTooltip }
+}
+
+export const useRTCState = (typedProps: TypedProps) => {
+  const { sessionUserIds } = useQallSession(
+    reactive({ channelId: computed(() => typedProps.channel.id) })
+  )
+
+  return { qallUserIds: sessionUserIds }
+}

From 36f6c614abc734154746e58b46ae22494581a18c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 7 Aug 2023 14:46:17 +0900
Subject: [PATCH 07/14] =?UTF-8?q?focus=E6=99=82=E3=81=AE=E8=89=B2=E3=82=92?=
 =?UTF-8?q?=E3=81=A4=E3=81=91=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/NavigationBar/ChannelList/ChannelElement.vue         | 1 +
 .../Main/NavigationBar/NavigationContent/ChannelsTab.vue      | 3 ++-
 .../Main/NavigationBar/NavigationContent/ClipFoldersTab.vue   | 3 ++-
 .../Main/NavigationBar/NavigationContent/ToggleButton.vue     | 4 ++++
 .../Main/NavigationBar/NavigationContent/UsersSeparator.vue   | 4 ++++
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index 69fd913ef..065469942 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -13,6 +13,7 @@
       :aria-label="showShortenedPath ? pathTooltip : pathToShow"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @mousedown="openChannel"
       @click="openChannel"
       @focus="onFocus"
       @blur="onBlur"
diff --git a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
index 9414a6bbf..6c4d79b84 100644
--- a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
@@ -120,7 +120,8 @@ const onClickButton = () => {
   @include color-ui-secondary-inactive;
   padding-right: 16px;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &:focus {
     @include color-ui-secondary;
   }
 }
diff --git a/src/components/Main/NavigationBar/NavigationContent/ClipFoldersTab.vue b/src/components/Main/NavigationBar/NavigationContent/ClipFoldersTab.vue
index 7d438d2b8..396ebe5f1 100644
--- a/src/components/Main/NavigationBar/NavigationContent/ClipFoldersTab.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/ClipFoldersTab.vue
@@ -49,7 +49,8 @@ const onClickButton = () => {
 .button {
   @include color-ui-secondary-inactive;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &:focus {
     @include color-ui-secondary;
   }
 }
diff --git a/src/components/Main/NavigationBar/NavigationContent/ToggleButton.vue b/src/components/Main/NavigationBar/NavigationContent/ToggleButton.vue
index 9b5b3edf6..a9128055f 100644
--- a/src/components/Main/NavigationBar/NavigationContent/ToggleButton.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/ToggleButton.vue
@@ -41,6 +41,10 @@ const toggle = () => {
   border-radius: 4px;
   text-align: center;
   cursor: pointer;
+  &:hover .icon,
+  &:focus-visible .icon {
+    @include color-ui-secondary;
+  }
 }
 
 .icon {
diff --git a/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue b/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
index d70ff3622..b0ade4ee1 100644
--- a/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/UsersSeparator.vue
@@ -38,6 +38,10 @@ withDefaults(
   align-items: center;
   justify-content: space-between;
   font-weight: bold;
+  &:hover .icon,
+  &:focus-visible .icon {
+    @include color-ui-secondary;
+  }
 }
 .name {
   position: relative;

From 020ec3a18bd6a0a72e426ea21fbe715e488adfd0 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 7 Aug 2023 21:50:07 +0900
Subject: [PATCH 08/14] =?UTF-8?q?=E5=8B=95=E3=81=8B=E3=81=AA=E3=81=8F?=
 =?UTF-8?q?=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=81=A7?=
 =?UTF-8?q?=E6=A7=8B=E9=80=A0=E3=82=92=E5=A4=A7=E3=81=8D=E3=81=8F=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelElement.vue            | 64 +++++++++++--------
 .../ChannelList/ChannelElementHash.vue        |  6 +-
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index 065469942..8e3d36317 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -5,19 +5,29 @@
     :data-is-inactive="$boolAttr(!channel.active)"
   >
     <!-- チャンネル表示本体 -->
-    <button
-      :class="$style.channel"
-      :aria-current="isSelected && 'page'"
-      :aria-expanded="hasChildren && isOpened ? true : undefined"
-      :data-is-inactive="$boolAttr(!channel.active)"
-      :aria-label="showShortenedPath ? pathTooltip : pathToShow"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-      @mousedown="openChannel"
-      @click="openChannel"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
+    <div :class="$style.channelContainer">
+      <router-link
+        :to="channelIdToLink(props.channel.id)"
+        :class="$style.channel"
+        :aria-current="isSelected && 'page'"
+        :aria-expanded="hasChildren && isOpened ? true : undefined"
+        :data-is-inactive="$boolAttr(!channel.active)"
+        :aria-label="showShortenedPath ? pathTooltip : pathToShow"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+        @focus="onFocus"
+        @blur="onBlur"
+      >
+        <channel-element-name
+          :channel="channel"
+          :show-shortened-path="showShortenedPath"
+          :is-selected="isSelected"
+        />
+        <channel-element-unread-badge
+          :is-noticeable="notificationState.isNoticeable"
+          :unread-count="notificationState.unreadCount"
+        />
+      </router-link>
       <channel-element-hash
         :class="$style.channelHash"
         :has-child="hasChildren"
@@ -26,20 +36,11 @@
         :has-notification="notificationState.hasNotification"
         :has-notification-on-child="notificationState.hasNotificationOnChild"
         :is-inactive="!channel.active"
-        @click.stop="onChannelHashClick"
+        @mousedown="onChannelHashClick"
         @mouseenter="onHashMouseEnter"
         @mouseleave="onHashMouseLeave"
       />
-      <channel-element-name
-        :channel="channel"
-        :show-shortened-path="showShortenedPath"
-        :is-selected="isSelected"
-      />
-      <channel-element-unread-badge
-        :is-noticeable="notificationState.isNoticeable"
-        :unread-count="notificationState.unreadCount"
-      />
-    </button>
+    </div>
 
     <div :class="$style.slot">
       <slot />
@@ -147,15 +148,14 @@ $bgLeftShift: 8px;
     @include color-accent-primary;
   }
 }
-.channel {
-  display: flex;
-  align-items: center;
+.channelContainer {
   position: relative;
+  display: flex;
   height: $elementHeight;
+  padding-left: 24px;
   padding-right: 4px;
   margin-left: $bgLeftShift;
   z-index: 0;
-  width: calc(100% - $bgLeftShift);
   &[data-is-inactive] {
     @include color-ui-secondary;
   }
@@ -163,9 +163,17 @@ $bgLeftShift: 8px;
     @include color-accent-primary;
   }
 }
+.channel {
+  display: flex;
+  align-items: center;
+  margin-left: $bgLeftShift;
+  width: calc(100% - $bgLeftShift);
+}
 .channelHash {
   flex-shrink: 0;
   cursor: pointer;
+  position: absolute;
+  left: 0;
 }
 .selectedBg {
   position: absolute;
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
index 6fabfee5d..4ebcee7f7 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -80,7 +80,7 @@ withDefaults(
       @include color-ui-secondary;
       border-color: $theme-ui-secondary-default;
     }
-    &[data-is-selected='true'] {
+    &[data-is-selected] {
       @include color-accent-primary;
     }
   }
@@ -111,7 +111,7 @@ withDefaults(
           background: $theme-ui-secondary-background;
         }
       }
-      &[data-is-selected='true'] {
+      &[data-is-selected] {
         @include background-accent-primary;
         &:hover::before,
         .container:focus &::before {
@@ -142,7 +142,7 @@ withDefaults(
           background: $theme-accent-notification-background;
         }
       }
-      &[data-is-selected='true'] {
+      &[data-is-selected] {
         @include color-accent-primary;
         border-color: $theme-accent-primary-default;
         &:hover::before,

From f56f9b690fd8b3aec4b9bc33723479a082d88069 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 12 Aug 2023 00:32:19 +0900
Subject: [PATCH 09/14] =?UTF-8?q?=E3=82=AD=E3=83=BC=E3=83=9C=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=81=A7=E3=83=8F=E3=83=83=E3=82=B7=E3=83=A5=E3=82=92?=
 =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=A7=E3=81=8D=E3=81=AA?=
 =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelElement.vue            | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index 8e3d36317..a093cb2f9 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -36,9 +36,10 @@
         :has-notification="notificationState.hasNotification"
         :has-notification-on-child="notificationState.hasNotificationOnChild"
         :is-inactive="!channel.active"
-        @mousedown="onChannelHashClick"
-        @mouseenter="onHashMouseEnter"
-        @mouseleave="onHashMouseLeave"
+        @mousedown.stop="onChannelHashClick"
+        @keydown.enter="onChannelHashKeydownEnter"
+        @mouseenter="onHashHovered"
+        @mouseleave="onHashHoveredLeave"
       />
     </div>
 
@@ -100,6 +101,11 @@ const isSelected = computed(
     props.channel.id === primaryView.value.channelId
 )
 
+const onChannelHashKeydownEnter = () => {
+  if (hasChildren.value) {
+    emit('clickHash', props.channel.id)
+  }
+}
 const onChannelHashClick = (e: MouseEvent) => {
   if (hasChildren.value && e.button === LEFT_CLICK_BUTTON) {
     emit('clickHash', props.channel.id)
@@ -125,6 +131,14 @@ const {
   onMouseEnter: onHashMouseEnter,
   onMouseLeave: onHashMouseLeave
 } = useHover()
+const onHashHovered = () => {
+  onHashMouseEnter()
+  onMouseEnter()
+}
+const onHashHoveredLeave = () => {
+  onHashMouseLeave()
+  onMouseLeave()
+}
 const isChannelBgHovered = computed(
   () => isHovered.value && !(hasChildren.value && isHashHovered.value)
 )

From b925088f80cf2fb4430bc2ddf25575e607506d73 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 18 Aug 2023 22:39:45 +0900
Subject: [PATCH 10/14] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=83=9B=E3=83=90=E3=83=BC=E6=99=82=E3=81=AECSS?=
 =?UTF-8?q?=E3=82=92=E4=B8=80=E6=97=A6=E6=B6=88=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/UserIcon.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index dedad6f3e..b22ff6596 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -92,10 +92,6 @@ const { isClickable, openModal } = useUserModalOpener(
   &[data-is-clickable='true'] {
     cursor: pointer;
   }
-  &:hover,
-  &:focus {
-    opacity: 0.7;
-  }
 }
 .indicator {
   position: absolute;

From 69f33a335d124df734233d5ab9ec08fbc6ebb2b8 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 4 Nov 2023 15:01:35 +0900
Subject: [PATCH 11/14] =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D?=
 =?UTF-8?q?=E3=83=AB=E3=82=BF=E3=83=96=E3=81=AE=E3=82=BF=E3=83=96=E3=82=92?=
 =?UTF-8?q?=E3=81=84=E3=81=84=E6=84=9F=E3=81=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelListSelector.vue       | 47 ++++++++++++++++++-
 .../NavigationBar/ChannelList/ChannelTree.vue | 19 ++++----
 .../NavigationContent/ChannelsTab.vue         | 23 ++++++++-
 src/components/UI/EmptyState.vue              |  8 ++++
 4 files changed, 84 insertions(+), 13 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue b/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
index 1bee5d350..fd8b96259 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
@@ -1,29 +1,74 @@
 <template>
-  <div :class="$style.container" role="tablist">
+  <div
+    :class="$style.container"
+    role="tablist"
+    @keydown.left="onKeydown"
+    @keydown.right="onKeydown"
+  >
     <a-tab
+      ref="allTabRef"
       label="すべて"
       :aria-selected="!isStared"
+      :aria-controls="allPanelId"
+      :tabindex="isStared ? -1 : 0"
       @click="unselectStarFilter"
     />
     <a-tab
+      ref="staredTabRef"
       label="お気に入り"
       :aria-selected="isStared"
+      :aria-controls="staredPanelId"
+      :tabindex="isStared ? 0 : -1"
       @click="selectStarFilter"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, type Ref } from 'vue'
 import ATab from '/@/components/UI/ATab.vue'
 
 const props = defineProps<{
   isStared: boolean
+  allPanelId: string
+  staredPanelId: string
 }>()
 
 const emit = defineEmits<{
   (e: 'update:isStared', v: boolean): void
 }>()
 
+const allTabRef = ref<InstanceType<typeof ATab> | null>(null)
+const staredTabRef = ref<InstanceType<typeof ATab> | null>(null)
+
+const tabNames = ['all', 'stared'] as const
+const tabNameRefs: Record<
+  (typeof tabNames)[number],
+  Ref<InstanceType<typeof ATab> | null>
+> = {
+  all: allTabRef,
+  stared: staredTabRef
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  const index = props.isStared ? 1 : 0
+
+  let nextIndex: number
+  if (e.key === 'ArrowLeft') {
+    nextIndex = index - 1
+  } else if (e.key === 'ArrowRight') {
+    nextIndex = index + 1
+  } else {
+    return
+  }
+
+  nextIndex = (nextIndex + tabNames.length) % tabNames.length
+
+  const nextTabName = tabNames[nextIndex] ?? tabNames[index]
+  emit('update:isStared', tabNames[nextIndex] === 'stared')
+  tabNameRefs[nextTabName].value?.focus()
+}
+
 const selectStarFilter = () => {
   emit('update:isStared', true)
 }
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelTree.vue b/src/components/Main/NavigationBar/ChannelList/ChannelTree.vue
index a7c442214..53b40be99 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelTree.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelTree.vue
@@ -21,17 +21,16 @@ import type { ChannelId } from '/@/types/entity-ids'
 import type { ChannelTreeNode } from '/@/lib/channelTree'
 import ChannelElement from './ChannelElement.vue'
 import SlideDown from '/@/components/UI/SlideDown.vue'
-import { ref } from 'vue'
+import { ref, type HTMLAttributes } from 'vue'
 
-withDefaults(
-  defineProps<{
-    channels: ReadonlyArray<ChannelTreeNode>
-    showShortenedPath?: boolean
-  }>(),
-  {
-    showShortenedPath: false
-  }
-)
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  channels: ReadonlyArray<ChannelTreeNode>
+  showShortenedPath?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  showShortenedPath: false
+})
 
 const childrenShownChannels = ref(new Set<ChannelId>())
 const toggleChildren = (channelId: ChannelId) => {
diff --git a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
index 6c4d79b84..d17442ffe 100644
--- a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
@@ -15,6 +15,8 @@
         <channel-list-selector
           v-if="query.length === 0"
           v-model:is-stared="filterStarChannel"
+          :all-panel-id="allPanelId"
+          :stared-panel-id="staredPanelId"
         />
         <template v-if="topLevelChannels.length > 0">
           <channel-list
@@ -25,12 +27,25 @@
           <template v-else-if="filterStarChannel">
             <channel-tree-component
               v-if="staredChannels.length > 0"
+              :id="staredPanelId"
               :channels="staredChannels"
               show-shortened-path
+              role="tabpanel"
             />
-            <empty-state v-else>お気に入りチャンネルはありません</empty-state>
+            <empty-state
+              v-else
+              :id="staredPanelId"
+              role="tabpanel"
+            >
+              お気に入りチャンネルはありません
+            </empty-state>
           </template>
-          <channel-tree-component v-else :channels="topLevelChannels" />
+          <channel-tree-component
+            v-else
+            :id="allPanelId"
+            :channels="topLevelChannels"
+            role="tabpanel"
+          />
         </template>
         <empty-state v-else>チャンネルがありません</empty-state>
       </template>
@@ -58,6 +73,7 @@ import useStaredChannelDescendants from './composables/useStaredChannelDescendan
 import { useStaredChannels } from '/@/store/domain/staredChannels'
 import useChannelPath from '/@/composables/useChannelPath'
 import ChannelListSelector from '../ChannelList/ChannelListSelector.vue'
+import { randomString } from '/@/lib/basic/randomString'
 
 const { pushModal } = useModalStore()
 
@@ -110,6 +126,9 @@ const onClickButton = () => {
     type: 'channel-create'
   })
 }
+
+const allPanelId = randomString()
+const staredPanelId = randomString()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/UI/EmptyState.vue b/src/components/UI/EmptyState.vue
index 4d14892d4..fef17c689 100644
--- a/src/components/UI/EmptyState.vue
+++ b/src/components/UI/EmptyState.vue
@@ -4,6 +4,14 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Props extends /* @vue-ignore */ HTMLAttributes{}
+
+defineProps<Props>()
+</script>
+
 <style lang="scss" module>
 .container {
   @include color-ui-tertiary;

From 3dd68402ec9f931dc712fdef916045b88baab836 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 4 Nov 2023 20:27:09 +0900
Subject: [PATCH 12/14] format

---
 .../Main/NavigationBar/NavigationContent/ChannelsTab.vue    | 6 +-----
 src/components/UI/EmptyState.vue                            | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
index d17442ffe..6c62dc25c 100644
--- a/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
@@ -32,11 +32,7 @@
               show-shortened-path
               role="tabpanel"
             />
-            <empty-state
-              v-else
-              :id="staredPanelId"
-              role="tabpanel"
-            >
+            <empty-state v-else :id="staredPanelId" role="tabpanel">
               お気に入りチャンネルはありません
             </empty-state>
           </template>
diff --git a/src/components/UI/EmptyState.vue b/src/components/UI/EmptyState.vue
index fef17c689..f7e1754c2 100644
--- a/src/components/UI/EmptyState.vue
+++ b/src/components/UI/EmptyState.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Props extends /* @vue-ignore */ HTMLAttributes{}
+interface Props extends /* @vue-ignore */ HTMLAttributes {}
 
 defineProps<Props>()
 </script>

From 21f16d5d11ed94e5c87ff331089d62a900b1686a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 25 Apr 2024 20:29:53 +0900
Subject: [PATCH 13/14] =?UTF-8?q?useFocus=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/MessageInput/MessageInput.vue      | 2 +-
 .../Main/NavigationBar/ChannelList/ChannelElement.vue           | 2 +-
 .../MessageInput/composables => composables/dom}/useFocus.ts    | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{components/Main/MainView/MessageInput/composables => composables/dom}/useFocus.ts (100%)

diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index c133bfa00..4d002f23d 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -72,7 +72,7 @@ import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
 import useAttachments from './composables/useAttachments'
 import useModifierKey from './composables/useModifierKey'
 import usePostMessage from './composables/usePostMessage'
-import useFocus from './composables/useFocus'
+import useFocus from '/@/composables/dom/useFocus'
 import { useToastStore } from '/@/store/ui/toast'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index a093cb2f9..ebd185fb9 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -70,7 +70,7 @@ import ChannelElementName from './ChannelElementName.vue'
 import useNotificationState from '../composables/useNotificationState'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useChannelPath from '/@/composables/useChannelPath'
-import useFocus from '/@/components/Main/MainView/MessageInput/composables/useFocus'
+import useFocus from '/@/composables/dom/useFocus'
 import {
   usePath,
   type TypedProps
diff --git a/src/components/Main/MainView/MessageInput/composables/useFocus.ts b/src/composables/dom/useFocus.ts
similarity index 100%
rename from src/components/Main/MainView/MessageInput/composables/useFocus.ts
rename to src/composables/dom/useFocus.ts

From ab77de7942a2f97b09a8a81805eacf79eefb7b8a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 25 Apr 2024 20:36:18 +0900
Subject: [PATCH 14/14] =?UTF-8?q?hash=E3=82=92=E5=89=8D=E3=81=AB=E7=A7=BB?=
 =?UTF-8?q?=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelList/ChannelElement.vue            | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
index ebd185fb9..4102cc076 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -6,6 +6,19 @@
   >
     <!-- チャンネル表示本体 -->
     <div :class="$style.channelContainer">
+      <channel-element-hash
+        :class="$style.channelHash"
+        :has-child="hasChildren"
+        :is-selected="isSelected"
+        :is-opened="isOpened"
+        :has-notification="notificationState.hasNotification"
+        :has-notification-on-child="notificationState.hasNotificationOnChild"
+        :is-inactive="!channel.active"
+        @mousedown.stop="onChannelHashClick"
+        @keydown.enter="onChannelHashKeydownEnter"
+        @mouseenter="onHashHovered"
+        @mouseleave="onHashHoveredLeave"
+      />
       <router-link
         :to="channelIdToLink(props.channel.id)"
         :class="$style.channel"
@@ -28,19 +41,6 @@
           :unread-count="notificationState.unreadCount"
         />
       </router-link>
-      <channel-element-hash
-        :class="$style.channelHash"
-        :has-child="hasChildren"
-        :is-selected="isSelected"
-        :is-opened="isOpened"
-        :has-notification="notificationState.hasNotification"
-        :has-notification-on-child="notificationState.hasNotificationOnChild"
-        :is-inactive="!channel.active"
-        @mousedown.stop="onChannelHashClick"
-        @keydown.enter="onChannelHashKeydownEnter"
-        @mouseenter="onHashHovered"
-        @mouseleave="onHashHoveredLeave"
-      />
     </div>
 
     <div :class="$style.slot">