diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index c80c4aabf..256262601 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 bbfeceaf3..4102cc076 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -1,16 +1,11 @@
 <template>
   <div
     :class="$style.container"
-    :aria-selected="isSelected"
+    :data-is-selected="$boolAttr(isSelected)"
     :data-is-inactive="$boolAttr(!channel.active)"
   >
     <!-- チャンネル表示本体 -->
-    <div
-      :class="$style.channel"
-      @mousedown="openChannel"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
+    <div :class="$style.channelContainer">
       <channel-element-hash
         :class="$style.channelHash"
         :has-child="hasChildren"
@@ -20,18 +15,32 @@
         :has-notification-on-child="notificationState.hasNotificationOnChild"
         :is-inactive="!channel.active"
         @mousedown.stop="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"
+        @keydown.enter="onChannelHashKeydownEnter"
+        @mouseenter="onHashHovered"
+        @mouseleave="onHashHoveredLeave"
       />
+      <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>
     </div>
 
     <div :class="$style.slot">
@@ -40,9 +49,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 +70,11 @@ import ChannelElementName from './ChannelElementName.vue'
 import useNotificationState from '../composables/useNotificationState'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useChannelPath from '/@/composables/useChannelPath'
+import useFocus from '/@/composables/dom/useFocus'
+import {
+  usePath,
+  type TypedProps
+} from '/@/components/Main/NavigationBar/ChannelList/composables/usePath'
 
 const props = withDefaults(
   defineProps<{
@@ -86,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)
@@ -100,14 +120,25 @@ 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()
+const { isFocused, onFocus, onBlur } = useFocus()
 const {
   isHovered: isHashHovered,
   onMouseEnter: onHashMouseEnter,
   onMouseLeave: onHashMouseLeave
 } = useHover()
+const onHashHovered = () => {
+  onHashMouseEnter()
+  onMouseEnter()
+}
+const onHashHoveredLeave = () => {
+  onHashMouseLeave()
+  onMouseLeave()
+}
 const isChannelBgHovered = computed(
   () => isHovered.value && !(hasChildren.value && isHashHovered.value)
 )
@@ -127,22 +158,36 @@ $bgLeftShift: 8px;
   &[data-is-inactive] {
     @include color-ui-secondary;
   }
-  &[aria-selected='true'] {
+  &[data-is-selected] {
     @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;
+  &[data-is-inactive] {
+    @include color-ui-secondary;
+  }
+  &[aria-current='page'] {
+    @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;
@@ -157,11 +202,12 @@ $bgLeftShift: 8px;
   pointer-events: none;
 
   display: none;
-  .container[aria-selected='true'] > & {
+  .container[data-is-selected] > & {
     @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..4ebcee7f7 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue
@@ -1,10 +1,20 @@
 <template>
-  <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'"
       :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)"
     >
@@ -13,7 +23,7 @@
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :border-width="2" />
     </div>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -70,12 +80,13 @@ withDefaults(
       @include color-ui-secondary;
       border-color: $theme-ui-secondary-default;
     }
-    &[aria-selected='true'] {
+    &[data-is-selected] {
       @include color-accent-primary;
     }
   }
   &[data-container-type='parent'] {
-    &:hover::before {
+    &:hover::before,
+    .container:focus &::before {
       content: '';
       border-radius: 4px;
       display: block;
@@ -88,19 +99,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'] {
+      &[data-is-selected] {
         @include background-accent-primary;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           @include background-accent-primary;
         }
       }
@@ -108,27 +122,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'] {
+      &[data-is-selected] {
         @include color-accent-primary;
         border-color: $theme-accent-primary-default;
-        &:hover::before {
+        &:hover::before,
+        .container:focus &::before {
           @include background-accent-primary;
         }
       }
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/ChannelListSelector.vue b/src/components/Main/NavigationBar/ChannelList/ChannelListSelector.vue
index 496922922..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">
+  <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/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 }
+}
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/NavigationContent/ChannelsTab.vue b/src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
index 9414a6bbf..6c62dc25c 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,21 @@
           <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 +69,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 +122,9 @@ const onClickButton = () => {
     type: 'channel-create'
   })
 }
+
+const allPanelId = randomString()
+const staredPanelId = randomString()
 </script>
 
 <style lang="scss" module>
@@ -120,7 +135,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/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..b0ade4ee1 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,9 +34,14 @@ withDefaults(
   @include color-ui-secondary;
   @include size-body2;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
   font-weight: bold;
+  &:hover .icon,
+  &:focus-visible .icon {
+    @include color-ui-secondary;
+  }
 }
 .name {
   position: relative;
diff --git a/src/components/Main/NavigationBar/NavigationSelectorItem.vue b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
index 0f732663f..8fe511201 100644
--- a/src/components/Main/NavigationBar/NavigationSelectorItem.vue
+++ b/src/components/Main/NavigationBar/NavigationSelectorItem.vue
@@ -1,14 +1,15 @@
 <template>
-  <div
+  <button
     :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">
       <notification-indicator :size="6" />
     </div>
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>
@@ -64,7 +65,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/EmptyState.vue b/src/components/UI/EmptyState.vue
index 4d14892d4..f7e1754c2 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;
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>
diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 6251c1046..b22ff6596 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,7 +89,7 @@ const { isClickable, openModal } = useUserModalOpener(
     repeat: no-repeat;
     size: cover;
   }
-  &[role='button'] {
+  &[data-is-clickable='true'] {
     cursor: pointer;
   }
 }
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