fix a11y

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
+import { onClickOutside, onKeyStroke, useScrollLock } from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { inBrowser, onContentUpdated } from 'vitepress'
 import { nextTick, ref } from 'vue'
 import { useData } from '../composables/data'
 import { resolveTitle, type MenuItem } from '../composables/outline'
@@ -14,15 +16,40 @@ const props = defineProps<{
 const { theme } = useData()
 const open = ref(false)
 const vh = ref(0)
+const main = ref<HTMLDivElement>()
 const items = ref<HTMLDivElement>()
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+
+onClickOutside(main, () => {
+  open.value = false
+})
+
+onKeyStroke('Escape', () => {
+  open.value = false
+})
 
 onContentUpdated(() => {
   open.value = false
 })
 
+const { activate } = useFocusTrap(main, {
+  immediate: true,
+  allowOutsideClick: true,
+  clickOutsideDeactivates: true,
+  escapeDeactivates: true
+})
+
 function toggle() {
   open.value = !open.value
   vh.value = window.innerHeight + Math.min(window.scrollY - props.navHeight, 0)
+  nextTick(() => {
+    if (open.value) {
+      isLocked.value = true
+      activate()
+    } else {
+      isLocked.value = false
+    }
+  })
 }
 
 function onItemClick(e: Event) {
@@ -44,7 +71,11 @@ function scrollToTop() {
 </script>
 
 <template>
-  <div class="VPLocalNavOutlineDropdown" :style="{ '--vp-vh': vh + 'px' }">
+  <div
+    class="VPLocalNavOutlineDropdown"
+    :style="{ '--vp-vh': vh + 'px' }"
+    ref="main"
+  >
     <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
       {{ resolveTitle(theme) }}
       <VPIconChevronRight class="icon" />
@@ -53,11 +84,7 @@ function scrollToTop() {
       {{ theme.returnToTopLabel || 'Return to top' }}
     </button>
     <Transition name="flyout">
-      <div v-if="open"
-        ref="items"
-        class="items"
-        @click="onItemClick"
-      >
+      <div v-if="open" ref="items" class="items" @click="onItemClick">
         <div class="header">
           <a class="top-link" href="#" @click="scrollToTop">
             {{ theme.returnToTopLabel || 'Return to top' }}
@@ -162,11 +189,11 @@ function scrollToTop() {
 }
 
 .flyout-enter-active {
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .flyout-leave-active {
-  transition: all .15s ease-in;
+  transition: all 0.15s ease-in;
 }
 
 .flyout-enter-from,