From 257f9e68e947a603f9c3ef0df4be7b2afa79fbe7 Mon Sep 17 00:00:00 2001
From: Urata Daiki <7nohe@users.noreply.github.com>
Date: Mon, 26 Dec 2022 17:03:40 +0900
Subject: [PATCH] perf(a11y): make menu traversable only when it is open
(#1491)
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
src/client/theme-default/Layout.vue | 1 +
.../components/VPSidebarLink.vue | 23 ++++++++++++++++---
.../theme-default/composables/sidebar.ts | 5 ++++
3 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index ffaf6b9cdb3..a18fb9c90b4 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -22,6 +22,7 @@ watch(() => route.path, closeSidebar)
useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
provide('close-sidebar', closeSidebar)
+provide('is-sidebar-open', isSidebarOpen)
const { frontmatter } = useData()
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 00775138dd9..4052f2f564d 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,11 +1,12 @@
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 7cb1b05509f..e5bb53feb10 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -1,10 +1,12 @@
import { computed, onMounted, onUnmounted, Ref, ref, watchEffect } from 'vue'
import { useData, useRoute } from 'vitepress'
+import { useMediaQuery } from '@vueuse/core'
import { getSidebar } from '../support/sidebar.js'
export function useSidebar() {
const route = useRoute()
const { theme, frontmatter } = useData()
+ const is960 = useMediaQuery('(min-width: 960px)')
const isOpen = ref(false)
@@ -28,6 +30,8 @@ export function useSidebar() {
)
})
+ const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+
function open() {
isOpen.value = true
}
@@ -45,6 +49,7 @@ export function useSidebar() {
sidebar,
hasSidebar,
hasAside,
+ isSidebarEnabled,
open,
close,
toggle