Merge f7b4dc7fcf into dd29348466

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

@@ -295,25 +295,38 @@ function scrollToSelectedResult() {
   })
 }
 
-onKeyStroke('ArrowUp', (event) => {
+function goRelativeItem(offset: number) {
-  event.preventDefault()
+  const resNum = results.value.length
-  selectedIndex.value--
+  selectedIndex.value = (selectedIndex.value + resNum + (offset % resNum)) % resNum
-  if (selectedIndex.value < 0) {
-    selectedIndex.value = results.value.length - 1
-  }
   disableMouseOver.value = true
   scrollToSelectedResult()
+}
+
+onKeyStroke('ArrowUp', (event) => {
+  event.preventDefault()
+  goRelativeItem(-1)
 })
 
 onKeyStroke('ArrowDown', (event) => {
   event.preventDefault()
-  selectedIndex.value++
+  goRelativeItem(1)
-  if (selectedIndex.value >= results.value.length) {
+})
-    selectedIndex.value = 0
+
+if (document.documentElement.classList.contains('mac')) {
+  onKeyStroke('n', (event) => {
+    if (event.ctrlKey) {
+      event.preventDefault()
+      goRelativeItem(1)
+    }
+  })
+
+  onKeyStroke('p', (event) => {
+    if (event.ctrlKey) {
+      event.preventDefault()
+      goRelativeItem(-1)
     }
-  disableMouseOver.value = true
-  scrollToSelectedResult()
   })
+}
 
 const router = useRouter()
 
@@ -558,9 +571,18 @@ function onMouseMove(e: MouseEvent) {
             <kbd :aria-label="translate('modal.footer.navigateUpKeyAriaLabel')">
               <span class="vpi-arrow-up navigate-icon" />
             </kbd>
+            <span>/</span>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="navigate-icon">ctrl-p</span>
+            </kbd>
+            <span>and</span>
             <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
               <span class="vpi-arrow-down navigate-icon" />
             </kbd>
+            <span>/</span>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="navigate-icon">ctrl-n</span>
+            </kbd>
             {{ translate('modal.footer.navigateText') }}
           </span>
           <span>