From 19238504b5b5b2abc63f8313b93e317e8e200a0b Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 19 Jan 2026 12:12:56 +0000
Subject: [PATCH] fix: migrate mobile menu to popover + add skip link

---
 app/app.vue                             |  6 +++
 app/components/layout/TheSiteHeader.vue | 63 +++++++++++--------------
 app/pages/ai.vue                        |  5 +-
 app/pages/bio.vue                       |  5 +-
 app/pages/blog/[article].vue            |  5 +-
 app/pages/blog/index.vue                |  1 +
 app/pages/feed.vue                      |  1 +
 app/pages/feedback.vue                  |  5 +-
 app/pages/index.vue                     |  1 +
 app/pages/live.vue                      |  5 +-
 app/pages/talks.vue                     |  5 +-
 app/pages/uses.vue                      |  1 +
 app/pages/voted.vue                     |  5 +-
 app/pages/work.vue                      |  5 +-
 14 files changed, 69 insertions(+), 44 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 6dc14cb9..eebac735 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -5,6 +5,12 @@
     :class="{ 'highlight-islands': highlightIslands }"
     @click="openSiteUI"
   >
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-background focus:rounded focus:font-medium"
+    >
+      Skip to main content
+    </a>
     <LayoutTheSiteHeader />
     <NuxtPage />
     <LayoutThePresenceIndicator />
diff --git a/app/components/layout/TheSiteHeader.vue b/app/components/layout/TheSiteHeader.vue
index 15a77da9..bfbcbe00 100644
--- a/app/components/layout/TheSiteHeader.vue
+++ b/app/components/layout/TheSiteHeader.vue
@@ -5,6 +5,7 @@ const redirect = import.meta.dev
   : ''
 const loginURL = `https://github.com/login/oauth/authorize?client_id=${config.public.githubClientId}${redirect}&scope=read:org`
 
+const mobileMenuRef = ref<HTMLElement | null>(null)
 const showMenu = ref(false)
 
 const { data: currentLocation } = await useFetch('/api/current-location', {
@@ -34,25 +35,13 @@ const menu = [
 ]
 
 useRouter().afterEach(() => {
-  toggleMenu(false)
+  mobileMenuRef.value?.hidePopover()
 })
 
-watch(showMenu, value => {
-  document.body.classList.toggle('overflow-hidden', value)
-})
-
-function toggleMenu (input?: Event | boolean) {
-  const newValue = typeof input === 'boolean' ? input : !showMenu.value
-  if (import.meta.server || input === showMenu.value) return
-  if (document.startViewTransition) {
-    document.startViewTransition(async () => {
-      showMenu.value = newValue
-      await nextTick()
-    })
-  }
-  else {
-    showMenu.value = newValue
-  }
+function onPopoverToggle (event: ToggleEvent) {
+  const isOpen = event.newState === 'open'
+  showMenu.value = isOpen
+  document.body.classList.toggle('overflow-hidden', isOpen)
 }
 </script>
 
@@ -152,7 +141,7 @@ function toggleMenu (input?: Event | boolean) {
         <button
           type="button"
           class="ml-4 rounded f-ring"
-          @click="toggleMenu"
+          popovertarget="mobile-menu"
         >
           <span
             class="menu-icon h-8 w-8 md:h-6 md:w-6 i-ri:add-line"
@@ -161,25 +150,27 @@ function toggleMenu (input?: Event | boolean) {
           />
           <span class="sr-only"> Open mobile navigation menu </span>
         </button>
-        <Teleport
-          v-if="showMenu"
-          to="body"
+        <div
+          id="mobile-menu"
+          ref="mobileMenuRef"
+          popover
+          class="m-0 inset-0 h-full w-full max-h-full max-w-full border-none bg-accent text-muted flex flex-col justify-center items-center"
+          @toggle="onPopoverToggle"
         >
-          <nav
-            class="inset-0 fixed bg-accent text-muted z-10 flex flex-col justify-center items-center"
+          <button
+            type="button"
+            class="top-0 right-0 fixed p-8 rounded f-ring-accent"
+            popovertarget="mobile-menu"
+            popovertargetaction="hide"
           >
-            <button
-              type="button"
-              class="top-0 right-0 fixed p-8 rounded f-ring-accent"
-              @click="toggleMenu"
-            >
-              <span
-                class="menu-icon h-8 w-8 i-ri:close-fill"
-                :style="{ viewTransitionName: 'menu' }"
-                aria-hidden="true"
-              />
-              <span class="sr-only"> Close mobile navigation menu </span>
-            </button>
+            <span
+              class="menu-icon h-8 w-8 i-ri:close-fill"
+              :style="{ viewTransitionName: showMenu ? 'menu' : undefined }"
+              aria-hidden="true"
+            />
+            <span class="sr-only"> Close mobile navigation menu </span>
+          </button>
+          <nav aria-label="Mobile navigation">
             <ul
               class="uppercase tracking-[0.15rem] max-w-xl text-2xl flex flex-col items-center gap-6"
             >
@@ -201,7 +192,7 @@ function toggleMenu (input?: Event | boolean) {
               <li><ToggleColorMode class="flex" /></li>
             </ul>
           </nav>
-        </Teleport>
+        </div>
       </div>
       <ToggleColorMode class="hidden md:flex" />
     </div>
diff --git a/app/pages/ai.vue b/app/pages/ai.vue
index 8071cfee..0925585e 100644
--- a/app/pages/ai.vue
+++ b/app/pages/ai.vue
@@ -6,7 +6,10 @@
       </h1>
     </header>
 
-    <main class="text-muted text-lg max-w-[37.50rem]">
+    <main
+      id="main-content"
+      class="text-muted text-lg max-w-[37.50rem]"
+    >
       <StaticMarkdownRender
         collection="page"
         path="/ai"
diff --git a/app/pages/bio.vue b/app/pages/bio.vue
index 240215dc..ea1af9a7 100644
--- a/app/pages/bio.vue
+++ b/app/pages/bio.vue
@@ -6,7 +6,10 @@
       </h1>
     </header>
 
-    <main class="text-muted text-lg max-w-[37.50rem]">
+    <main
+      id="main-content"
+      class="text-muted text-lg max-w-[37.50rem]"
+    >
       <StaticMarkdownRender
         collection="page"
         path="/bio"
diff --git a/app/pages/blog/[article].vue b/app/pages/blog/[article].vue
index 605f8968..7b7bb3f6 100644
--- a/app/pages/blog/[article].vue
+++ b/app/pages/blog/[article].vue
@@ -1,5 +1,8 @@
 <template>
-  <main class="text-muted flex-grow px-4 py-2 md:px-12 md:py-4 w-full max-w-[37.50rem]">
+  <main
+    id="main-content"
+    class="text-muted flex-grow px-4 py-2 md:px-12 md:py-4 w-full max-w-[37.50rem]"
+  >
     <header
       v-if="page"
       class="leading-none mt-[5vw] mb-[1vw]"
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 7f3ad24e..69a2343e 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -6,6 +6,7 @@
       </h1>
     </header>
     <main
+      id="main-content"
       class="text-muted text-lg"
       @click="handleNavigationClicks"
     >
diff --git a/app/pages/feed.vue b/app/pages/feed.vue
index 86693158..b45cec41 100644
--- a/app/pages/feed.vue
+++ b/app/pages/feed.vue
@@ -6,6 +6,7 @@
       </h1>
     </header>
     <main
+      id="main-content"
       class="text-muted text-lg -mx-4 max-w-[37.50rem]"
       @click="handleNavigationClicks"
     >
diff --git a/app/pages/feedback.vue b/app/pages/feedback.vue
index fee4fca0..fd11e586 100644
--- a/app/pages/feedback.vue
+++ b/app/pages/feedback.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex-grow px-4 py-2 md:px-12 md:py-4 w-full">
-    <main class="text-muted text-lg">
+    <main
+      id="main-content"
+      class="text-muted text-lg"
+    >
       <form
         class="flex flex-col items-start py-8 gap-2"
         @submit.prevent="submitFeedback"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 38ba94a7..e2592b61 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,6 +34,7 @@ onNuxtReady(() =>
       </h1>
     </header>
     <main
+      id="main-content"
       class="text-muted"
       @click="handleNavigationClicks"
     >
diff --git a/app/pages/live.vue b/app/pages/live.vue
index 537493c2..fde717fa 100644
--- a/app/pages/live.vue
+++ b/app/pages/live.vue
@@ -12,7 +12,10 @@
       </div>
     </header>
 
-    <main class="text-muted text-lg max-w-[37.50rem]">
+    <main
+      id="main-content"
+      class="text-muted text-lg max-w-[37.50rem]"
+    >
       <div class="fixed inset-0 pointer-events-none overflow-hidden">
         <transition-group name="fade">
           <div
diff --git a/app/pages/talks.vue b/app/pages/talks.vue
index 710314fc..e47be65d 100644
--- a/app/pages/talks.vue
+++ b/app/pages/talks.vue
@@ -5,7 +5,10 @@
         latest talks
       </h1>
     </header>
-    <main class="text-muted text-lg">
+    <main
+      id="main-content"
+      class="text-muted text-lg"
+    >
       <TheTalks />
     </main>
   </div>
diff --git a/app/pages/uses.vue b/app/pages/uses.vue
index 5576f6c9..6768a11b 100644
--- a/app/pages/uses.vue
+++ b/app/pages/uses.vue
@@ -6,6 +6,7 @@
       </h1>
     </header>
     <main
+      id="main-content"
       class="text-muted text-lg max-w-[37.50rem] text-base"
     >
       <TheUses />
diff --git a/app/pages/voted.vue b/app/pages/voted.vue
index 4abf984b..6a3a6bb9 100644
--- a/app/pages/voted.vue
+++ b/app/pages/voted.vue
@@ -5,7 +5,10 @@
         Thank you!
       </h1>
     </header>
-    <main class="text-muted text-lg">
+    <main
+      id="main-content"
+      class="text-muted text-lg"
+    >
       <p>Your response has been recorded. 😊</p>
       <p>
         <NuxtLink
diff --git a/app/pages/work.vue b/app/pages/work.vue
index 9a41efd1..7d8b31ae 100644
--- a/app/pages/work.vue
+++ b/app/pages/work.vue
@@ -6,7 +6,10 @@
       </h1>
     </header>
 
-    <main class="text-muted text-lg max-w-[37.50rem]">
+    <main
+      id="main-content"
+      class="text-muted text-lg max-w-[37.50rem]"
+    >
       <TheGithubRepos />
       <form
         v-if="$auth.user.sponsor"
-- 
2.54.0