fix: a11y mobile menu items (#624)

Author: shamilkotta

app/components/MobileMenu.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
 const isOpen = defineModel<boolean>('open', { default: false })
 
 const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
 const { user: atprotoUser } = useAtproto()
 
+const navRef = useTemplateRef('navRef')
+const { activate, deactivate } = useFocusTrap(navRef, { allowOutsideClick: true })
+
 function closeMenu() {
   isOpen.value = false
 }
@@ -39,6 +44,8 @@ onKeyStroke(
 // Prevent body scroll when menu is open
 const isLocked = useScrollLock(document)
 watch(isOpen, open => (isLocked.value = open))
+watch(isOpen, open => (open ? nextTick(activate) : deactivate()))
+onUnmounted(deactivate)
 </script>
 
 <template>
@@ -75,6 +82,7 @@ watch(isOpen, open => (isLocked.value = open))
         >
           <nav
             v-if="isOpen"
+            ref="navRef"
             class="absolute inset-ie-0 top-0 bottom-0 w-72 bg-bg border-is border-border shadow-xl flex flex-col"
           >
             <!-- Header -->

package.json

@@ -66,8 +66,10 @@
     "@vite-pwa/nuxt": "1.1.0",
     "@voidzero-dev/vite-plus-core": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "@vueuse/core": "14.2.0",
+    "@vueuse/integrations": "14.2.0",
     "@vueuse/nuxt": "14.2.0",
     "@vueuse/router": "^14.2.0",
+    "focus-trap": "^7.8.0",
     "marked": "17.0.1",
     "module-replacements": "2.11.0",
     "nuxt": "4.3.0",