fix(theme/a11y): don't select search result unless mouse is actually moved

closes #4297
pull/4301/head
Divyansh Singh 3 weeks ago
parent fcae4d5554
commit e638d855cf

@ -281,7 +281,7 @@ function onSearchBarClick(event: PointerEvent) {
/* Search keyboard selection */ /* Search keyboard selection */
const selectedIndex = ref(-1) const selectedIndex = ref(-1)
const disableMouseOver = ref(false) const disableMouseOver = ref(true)
watch(results, (r) => { watch(results, (r) => {
selectedIndex.value = r.length ? 0 : -1 selectedIndex.value = r.length ? 0 : -1
@ -400,6 +400,16 @@ function formMarkRegex(terms: Set<string>) {
'gi' 'gi'
) )
} }
function onMouseMove(e: MouseEvent) {
if (!disableMouseOver.value) return
const el = (e.target as HTMLElement)?.closest<HTMLAnchorElement>('.result')
const index = Number.parseInt(el?.dataset.index!)
if (index >= 0 && index !== selectedIndex.value) {
selectedIndex.value = index
}
disableMouseOver.value = false
}
</script> </script>
<template> <template>
@ -487,7 +497,7 @@ function formMarkRegex(terms: Set<string>) {
:role="results?.length ? 'listbox' : undefined" :role="results?.length ? 'listbox' : undefined"
:aria-labelledby="results?.length ? 'localsearch-label' : undefined" :aria-labelledby="results?.length ? 'localsearch-label' : undefined"
class="results" class="results"
@mousemove="disableMouseOver = false" @mousemove="onMouseMove"
> >
<li <li
v-for="(p, index) in results" v-for="(p, index) in results"
@ -506,6 +516,7 @@ function formMarkRegex(terms: Set<string>) {
@mouseenter="!disableMouseOver && (selectedIndex = index)" @mouseenter="!disableMouseOver && (selectedIndex = index)"
@focusin="selectedIndex = index" @focusin="selectedIndex = index"
@click="$emit('close')" @click="$emit('close')"
:data-index="index"
> >
<div> <div>
<div class="titles"> <div class="titles">

Loading…
Cancel
Save