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

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

This reverts commit 070fc0a.

Author: brc-dd

src/client/theme-default/Layout.vue

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

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

@@ -27,16 +27,14 @@ function focusOnTargetAnchor({ target }: Event) {
 </script>
 
 <template>
-  <div>
-    <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>
 </template>
 
 <style scoped>

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

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