feat(theme): use inert to avoid traverse menus and content with keyboard (#2932)

Author: userquin

src/client/theme-default/Layout.vue

@@ -9,13 +9,16 @@ import VPNav from './components/VPNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
+import { useNav } from './composables/nav'
 import { useCloseSidebarOnEscape, useSidebar } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,
   open: openSidebar,
-  close: closeSidebar
+  close: closeSidebar,
+  isSidebarEnabled,
 } = useSidebar()
+const { isScreenOpen } = useNav()
 
 const route = useRoute()
 watch(() => route.path, closeSidebar)
@@ -33,24 +36,24 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 <template>
   <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass" >
     <slot name="layout-top" />
-    <VPSkipLink />
+    <VPSkipLink :inert="isSidebarOpen || isScreenOpen" />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav v-if="frontmatter.navbar !== false">
+    <VPNav v-if="frontmatter.navbar !== false" :inert="isSidebarOpen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
       <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
       <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
     </VPNav>
-    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+    <VPLocalNav :inert="isSidebarOpen || isScreenOpen" :open="isSidebarOpen" @open-menu="openSidebar" />
 
-    <VPSidebar :open="isSidebarOpen">
+    <VPSidebar :inert="!isSidebarEnabled && (!isSidebarOpen || isScreenOpen)" :open="isSidebarOpen">
       <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
       <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
     </VPSidebar>
 
-    <VPContent>
+    <VPContent :inert="isSidebarOpen || isScreenOpen">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
 
@@ -76,7 +79,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
 
-    <VPFooter />
+    <VPFooter :inert="isSidebarOpen || isScreenOpen" />
     <slot name="layout-bottom" />
   </div>
   <Content v-else />

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

@@ -27,14 +27,16 @@ function focusOnTargetAnchor({ target }: Event) {
 </script>
 
 <template>
-  <span ref="backToTop" tabindex="-1" />
-  <a
-    href="#VPContent"
-    class="VPSkipLink visually-hidden"
-    @click="focusOnTargetAnchor"
-  >
-    Skip to content
-  </a>
+  <div>
+    <span ref="backToTop" tabindex="-1" />
+    <a
+        href="#VPContent"
+        class="VPSkipLink visually-hidden"
+        @click="focusOnTargetAnchor"
+    >
+      Skip to content
+    </a>
+  </div>
 </template>
 
 <style scoped>

src/client/theme-default/composables/nav.ts

@@ -1,9 +1,9 @@
 import { ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
 
-export function useNav() {
-  const isScreenOpen = ref(false)
+const isScreenOpen = ref(false)
 
+export function useNav() {
   function openScreen() {
     isScreenOpen.value = true
     window.addEventListener('resize', closeScreenOnTabletWindow)