Improve mobile menu accessibility and dismissal behavior

Add focus management, semantic labeling, outside-click handling, and
automatic closure after navigation or search selection. Increase sheet
stacking and close-button touch targets, and cover the behavior with an
end-to-end test.

Author: Llewellyn500

components/Header.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import menuLinks from "@/data/menu";
 import SocialSharing from "./SocialSharing";
 import Search, { SearchItem } from "./Search";
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
 import {
   RiInstagramLine,
   RiYoutubeFill,
@@ -15,7 +15,7 @@ import {
   RiUser3Line,
 } from "react-icons/ri";
 
-import { useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { collection, getDocs, query, where } from "firebase/firestore";
 import { db } from "@/lib/firebase";
 import { SITE_NAME } from "@/lib/seo";
@@ -24,6 +24,8 @@ import NotificationBell from "./NotificationBell";
 
 export default function Header() {
   const [allArticles, setAllArticles] = useState<SearchItem[]>([]);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const mobileNavRef = useRef<HTMLElement>(null);
   const { user, profile } = usePublicAuth();
   const accountPhotoURL = profile?.photoURL || user?.photoURL || "";
   const accountLabel = user ? "Open your profile" : "Sign in or create an account";
@@ -83,7 +85,7 @@ export default function Header() {
         </div>
 
         {/* Mobile menu */}
-        <Sheet>
+        <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
           <SheetTrigger
             aria-labelledby="button-label"
             className="relative z-10 md:hidden"
@@ -106,18 +108,34 @@ export default function Header() {
           </SheetTrigger>
           <SheetContent
             side="top"
-            className="w-full pt-14"
-            aria-label="Menu Toggle"
+            className="max-h-[100dvh] w-full overflow-y-auto border-b border-white/30 bg-[#121212] px-4 pb-8 pt-16 text-white shadow-[0_24px_64px_rgba(0,0,0,0.55)] sm:px-6"
+            aria-describedby={undefined}
+            onOpenAutoFocus={(event) => {
+              event.preventDefault();
+              mobileNavRef.current?.focus({ preventScroll: true });
+            }}
+            onPointerDownOutside={() => setIsMobileMenuOpen(false)}
           >
+            <SheetTitle className="sr-only">Navigation menu</SheetTitle>
             <nav
-              className="flex flex-col flex-1 justify-end gap-6"
-              aria-labelledby="mobile-nav"
+              ref={mobileNavRef}
+              tabIndex={-1}
+              className="flex flex-1 flex-col justify-end gap-6 focus:outline-none"
+              aria-label="Primary navigation"
             >
               {/* Mobile Search */}
-              <Search articles={allArticles} className="w-full" />
+              <Search
+                articles={allArticles}
+                className="w-full"
+                onSearchSelect={() => setIsMobileMenuOpen(false)}
+              />
 
               {menuLinks.map((m, i) => (
-                <Link key={i} href={m.href}>
+                <Link
+                  key={i}
+                  href={m.href}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
                   {m.label}
                 </Link>
               ))}
@@ -126,6 +144,7 @@ export default function Header() {
                 <Link
                   href="/account"
                   aria-label={accountLabel}
+                  onClick={() => setIsMobileMenuOpen(false)}
                   className="inline-flex items-center justify-center text-2xl text-white transition-colors duration-300 hover:text-[#8a2ae3]"
                 >
                   {accountPhotoURL ? (

components/ui/sheet.tsx

@@ -24,7 +24,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[90] bg-black/70 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -34,7 +34,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[100] gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
@@ -68,8 +68,8 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+      <SheetPrimitive.Close className="absolute right-3 top-3 inline-flex h-11 w-11 touch-manipulation items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary sm:right-4 sm:top-4">
+        <X className="h-5 w-5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

e2e/navigation.spec.ts

@@ -14,3 +14,22 @@ test("should navigate from home page to posts page using header", async ({
     .click();
   await expect(page).toHaveURL("/posts");
 });
+
+test("mobile menu opens cleanly and closes on an outside tap", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 810, height: 1080 });
+  await page.goto("/account");
+
+  await page.getByRole("button", { name: "Menu" }).click();
+
+  const menu = page.getByRole("dialog", { name: "Navigation menu" });
+  await expect(menu).toBeVisible();
+  await expect(menu.getByPlaceholder("Search...")).not.toBeFocused();
+
+  const menuBox = await menu.boundingBox();
+  expect(menuBox).not.toBeNull();
+  await page.mouse.click(8, Math.min(1070, menuBox!.y + menuBox!.height + 24));
+
+  await expect(menu).toBeHidden();
+});