Skip to content

Commit 2f482af

Browse files
userquinbrc-dd
andauthored
feat(theme): add focus trap to local search dialog (#2324)
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
1 parent 35f8b89 commit 2f482af

File tree

3 files changed

+84
-6
lines changed

3 files changed

+84
-6
lines changed

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@
9292
"@vitejs/plugin-vue": "^4.2.1",
9393
"@vue/devtools-api": "^6.5.0",
9494
"@vueuse/core": "^10.1.0",
95+
"@vueuse/integrations": "^10.1.0",
9596
"body-scroll-lock": "4.0.0-beta.0",
97+
"focus-trap": "^7.4.0",
9698
"mark.js": "8.11.1",
9799
"minisearch": "^6.0.1",
98100
"shiki": "^0.14.2",

pnpm-lock.yaml

Lines changed: 66 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
useScrollLock,
1010
useSessionStorage
1111
} from '@vueuse/core'
12+
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
1213
import Mark from 'mark.js/src/vanilla.js'
1314
import MiniSearch, { type SearchResult } from 'minisearch'
1415
import { useRouter } from 'vitepress'
@@ -26,11 +27,11 @@ import {
2627
type Ref
2728
} from 'vue'
2829
import type { ModalTranslations } from '../../../../types/local-search'
30+
import { dataSymbol } from '../../app/data'
2931
import { pathToFile } from '../../app/utils'
3032
import { slash } from '../../shared'
3133
import { useData } from '../composables/data'
3234
import { createTranslate } from '../support/translation'
33-
import { dataSymbol } from '../../app/data'
3435
3536
defineProps<{
3637
placeholder: string
@@ -64,6 +65,12 @@ interface Result {
6465
}
6566
6667
const vitePressData = useData()
68+
const { activate } = useFocusTrap(el, {
69+
immediate: true,
70+
allowOutsideClick: true,
71+
clickOutsideDeactivates: true,
72+
escapeDeactivates: true
73+
})
6774
const { localeIndex, theme } = vitePressData
6875
const searchIndex = computedAsync(async () =>
6976
markRaw(
@@ -84,14 +91,14 @@ const searchIndex = computedAsync(async () =>
8491
8592
const disableQueryPersistence = computed(() => {
8693
return (
87-
theme.value.search?.provider === 'local' &&
88-
theme.value.search.options?.disableQueryPersistence === true
94+
theme.value.search?.provider === 'local' &&
95+
theme.value.search.options?.disableQueryPersistence === true
8996
)
9097
})
9198
9299
const filterText = disableQueryPersistence.value
93-
? ref('')
94-
: useSessionStorage('vitepress:local-search-filter', '')
100+
? ref('')
101+
: useSessionStorage('vitepress:local-search-filter', '')
95102
96103
const showDetailedList = useLocalStorage(
97104
'vitepress:local-search-detailed-list',
@@ -334,6 +341,7 @@ onMounted(() => {
334341
body.value = document.body
335342
nextTick(() => {
336343
isLocked.value = true
344+
nextTick().then(() => activate())
337345
})
338346
})
339347
@@ -474,6 +482,7 @@ function formMarkRegex(terms: Set<string>) {
474482
}"
475483
:aria-label="[...p.titles, p.title].join(' > ')"
476484
@mouseenter="!disableMouseOver && (selectedIndex = index)"
485+
@focusin="selectedIndex = index"
477486
@click="$emit('close')"
478487
>
479488
<div>
@@ -498,7 +507,7 @@ function formMarkRegex(terms: Set<string>) {
498507
</div>
499508

500509
<div v-if="showDetailedList" class="excerpt-wrapper">
501-
<div v-if="p.text" class="excerpt">
510+
<div v-if="p.text" class="excerpt" inert>
502511
<div class="vp-doc" v-html="p.text" />
503512
</div>
504513
<div class="excerpt-gradient-bottom" />
@@ -727,6 +736,7 @@ function formMarkRegex(terms: Set<string>) {
727736
transition: none;
728737
line-height: 1rem;
729738
border: solid 2px var(--vp-local-search-result-border);
739+
outline: none;
730740
}
731741
732742
.result > div {

0 commit comments

Comments
 (0)