From 92fb84d946a82511a8b858fb4bb38707c37a0610 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 23 Dec 2023 01:54:16 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/client/components/SidebarItem.vue     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/client/components/SidebarItem.vue b/packages/theme/src/client/components/SidebarItem.vue
index 75c17662..c49e6415 100644
--- a/packages/theme/src/client/components/SidebarItem.vue
+++ b/packages/theme/src/client/components/SidebarItem.vue
@@ -44,7 +44,10 @@ const classes = computed(() => [
   { 'has-active': hasActiveLink.value },
 ])
 
-function onItemClick() {
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
   !props.item.link && toggle()
 }
 
@@ -55,10 +58,19 @@ function onCaretClick() {
 
 <template>
   <Component :is="sectionTag" class="sidebar-item" :class="classes">
-    <div v-if="item.text" class="item" :role="itemRole" @click="onItemClick">
+    <div
+      v-if="item.text"
+      class="item"
+      :role="itemRole"
+      :tabindex="item.items && 0"
+      v-on="item.items
+        ? { click: onItemInteraction, keydown: onItemInteraction }
+        : {}
+      "
+    >
       <div class="indicator" />
 
-      <AutoLink :tag="linkTag" class="link" :href="item.link">
+      <AutoLink v-if="item.link" :tag="linkTag" class="link" :href="item.link">
         <!-- eslint-disable vue/no-v-text-v-html-on-component -->
         <!-- eslint-disable-next-line vue/no-v-html -->
         <Component :is="textTag" class="text" v-html="item.text" />
@@ -68,7 +80,10 @@ function onCaretClick() {
         v-if="item.collapsed != null"
         class="caret"
         role="button"
+        aria-label="toggle section"
+        tabindex="0"
         @click="onCaretClick"
+        @keydown.enter="onCaretClick"
       >
         <IconChevronRight class="caret-icon" />
       </div>