From 070fc0a56ddb941e26a098ba7207b5d1e91b7b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 10 Sep 2023 16:36:09 +0200
Subject: [PATCH] feat(theme): use inert to avoid traverse menus and content
 with keyboard (#2932)

---
 src/client/theme-default/Layout.vue            | 17 ++++++++++-------
 .../theme-default/components/VPSkipLink.vue    | 18 ++++++++++--------
 src/client/theme-default/composables/nav.ts    |  4 ++--
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 52bb16b2..34bd53dd 100644
--- a/src/client/theme-default/Layout.vue
+++ b/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,9 +36,9 @@ 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>
@@ -43,14 +46,14 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <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 />
diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
index 4159e64e..21155024 100644
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/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>
diff --git a/src/client/theme-default/composables/nav.ts b/src/client/theme-default/composables/nav.ts
index 92413b5a..0e85b145 100644
--- a/src/client/theme-default/composables/nav.ts
+++ b/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)