feat(theme): add focus trap to local search dialog (#2324)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

package.json

@@ -92,7 +92,9 @@
     "@vitejs/plugin-vue": "^4.2.1",
     "@vue/devtools-api": "^6.5.0",
     "@vueuse/core": "^10.1.0",
+    "@vueuse/integrations": "^10.1.0",
     "body-scroll-lock": "4.0.0-beta.0",
+    "focus-trap": "^7.4.0",
     "mark.js": "8.11.1",
     "minisearch": "^6.0.1",
     "shiki": "^0.14.2",

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -9,6 +9,7 @@ import {
   useScrollLock,
   useSessionStorage
 } from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { useRouter } from 'vitepress'
@@ -26,11 +27,11 @@ import {
   type Ref
 } from 'vue'
 import type { ModalTranslations } from '../../../../types/local-search'
+import { dataSymbol } from '../../app/data'
 import { pathToFile } from '../../app/utils'
 import { slash } from '../../shared'
 import { useData } from '../composables/data'
 import { createTranslate } from '../support/translation'
-import { dataSymbol } from '../../app/data'
 
 defineProps<{
   placeholder: string
@@ -64,6 +65,12 @@ interface Result {
 }
 
 const vitePressData = useData()
+const { activate } = useFocusTrap(el, {
+  immediate: true,
+  allowOutsideClick: true,
+  clickOutsideDeactivates: true,
+  escapeDeactivates: true
+})
 const { localeIndex, theme } = vitePressData
 const searchIndex = computedAsync(async () =>
   markRaw(
@@ -84,14 +91,14 @@ const searchIndex = computedAsync(async () =>
 
 const disableQueryPersistence = computed(() => {
   return (
-      theme.value.search?.provider === 'local' &&
-      theme.value.search.options?.disableQueryPersistence === true
+    theme.value.search?.provider === 'local' &&
+    theme.value.search.options?.disableQueryPersistence === true
   )
 })
 
 const filterText = disableQueryPersistence.value
-    ? ref('')
-    : useSessionStorage('vitepress:local-search-filter', '')
+  ? ref('')
+  : useSessionStorage('vitepress:local-search-filter', '')
 
 const showDetailedList = useLocalStorage(
   'vitepress:local-search-detailed-list',
@@ -334,6 +341,7 @@ onMounted(() => {
   body.value = document.body
   nextTick(() => {
     isLocked.value = true
+    nextTick().then(() => activate())
   })
 })
 
@@ -474,6 +482,7 @@ function formMarkRegex(terms: Set<string>) {
             }"
             :aria-label="[...p.titles, p.title].join(' > ')"
             @mouseenter="!disableMouseOver && (selectedIndex = index)"
+            @focusin="selectedIndex = index"
             @click="$emit('close')"
           >
             <div>
@@ -498,7 +507,7 @@ function formMarkRegex(terms: Set<string>) {
               </div>
 
               <div v-if="showDetailedList" class="excerpt-wrapper">
-                <div v-if="p.text" class="excerpt">
+                <div v-if="p.text" class="excerpt" inert>
                   <div class="vp-doc" v-html="p.text" />
                 </div>
                 <div class="excerpt-gradient-bottom" />
@@ -727,6 +736,7 @@ function formMarkRegex(terms: Set<string>) {
   transition: none;
   line-height: 1rem;
   border: solid 2px var(--vp-local-search-result-border);
+  outline: none;
 }
 
 .result > div {