diff --git a/package.json b/package.json
index a52b510c1fc..5ffbb741d03 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-portal": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5cfe3f09a4..28bb2ec3a66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
         version: 2.1.15(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-scope':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.0
         version: 1.2.13(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2431,6 +2434,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.8':
+    resolution: {integrity: sha512-BFjgXkfyRXxFJ0t/Xs4QSsb2wmkDfJ983j4vzC95on81gKPtJdJ+5ESHOuwKGm/umcWd2En33AiEMgyUGSKWQw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -2544,6 +2560,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-progress@1.1.7':
     resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
     peerDependencies:
@@ -2618,6 +2647,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-switch@1.2.5':
     resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==}
     peerDependencies:
@@ -11870,6 +11908,17 @@ snapshots:
       '@types/react': 18.2.57
       '@types/react-dom': 18.2.19
 
+  '@radix-ui/react-focus-scope@1.1.8(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.57)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.57)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.57
+      '@types/react-dom': 18.2.19
+
   '@radix-ui/react-id@1.1.1(@types/react@18.2.57)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.57)(react@18.3.1)
@@ -12005,6 +12054,15 @@ snapshots:
       '@types/react': 18.2.57
       '@types/react-dom': 18.2.19
 
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.2.57)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.57
+      '@types/react-dom': 18.2.19
+
   '@radix-ui/react-progress@1.1.7(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.57)(react@18.3.1)
@@ -12103,6 +12161,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.57
 
+  '@radix-ui/react-slot@1.2.4(@types/react@18.2.57)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.57)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.57
+
   '@radix-ui/react-switch@1.2.5(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
diff --git a/src/components/Nav/MobileMenu/MobileMenuClient.tsx b/src/components/Nav/MobileMenu/MobileMenuClient.tsx
new file mode 100644
index 00000000000..33d9b9b0d4d
--- /dev/null
+++ b/src/components/Nav/MobileMenu/MobileMenuClient.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+
+import { PersistentPanel } from "@/components/ui/persistent-panel"
+import { Sheet, SheetTrigger } from "@/components/ui/sheet"
+
+import { cn } from "@/lib/utils/cn"
+
+import HamburgerButton from "./HamburgerButton"
+
+import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate"
+
+type MobileMenuClientProps = {
+  className?: string
+  side: "left" | "right"
+  children: React.ReactNode
+}
+
+const MobileMenuClient = ({
+  className,
+  side,
+  children,
+}: MobileMenuClientProps) => {
+  const [open, setOpen] = useCloseOnNavigate()
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <HamburgerButton
+          ref={triggerRef}
+          className={cn("-me-2", className)}
+          isMenuOpen={open}
+        />
+      </SheetTrigger>
+
+      <PersistentPanel
+        open={open}
+        side={side}
+        className="flex flex-col"
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+      >
+        {children}
+      </PersistentPanel>
+    </Sheet>
+  )
+}
+
+export default MobileMenuClient
diff --git a/src/components/Nav/MobileMenu/index.tsx b/src/components/Nav/MobileMenu/index.tsx
index 9163ef93f3f..8625b941f46 100644
--- a/src/components/Nav/MobileMenu/index.tsx
+++ b/src/components/Nav/MobileMenu/index.tsx
@@ -12,13 +12,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible"
-import {
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-import { SheetCloseOnNavigate } from "@/components/ui/sheet-close-on-navigate"
+import { SheetFooter, SheetHeader } from "@/components/ui/sheet"
 
 import { cn } from "@/lib/utils/cn"
 import { isLangRightToLeft } from "@/lib/utils/translations"
@@ -28,8 +22,8 @@ import { MOBILE_LANGUAGE_BUTTON_NAME, SECTION_LABELS } from "@/lib/constants"
 
 import FooterButton from "./FooterButton"
 import FooterItemText from "./FooterItemText"
-import HamburgerButton from "./HamburgerButton"
 import MenuHeader from "./MenuHeader"
+import MobileMenuClient from "./MobileMenuClient"
 import ThemeToggleFooterButton from "./ThemeToggleFooterButton"
 
 import { getLanguagesDisplayInfo, getNavigation } from "@/lib/nav/links"
@@ -49,73 +43,59 @@ export default async function MobileMenu({
   const dir = isRtl ? "rtl" : "ltr"
 
   return (
-    <SheetCloseOnNavigate>
-      <SheetTrigger className={className} asChild>
-        <HamburgerButton
-          className={cn("-me-2", className)}
-          isMenuOpen={false}
-          {...props}
-        />
-      </SheetTrigger>
-      <SheetContent
-        side={side}
-        hideOverlay
-        className="flex flex-col"
-        aria-describedby=""
+    <MobileMenuClient className={className} side={side} {...props}>
+      <SheetHeader>
+        <MenuHeader />
+      </SheetHeader>
+
+      <TabsPrimitive.Root
+        dir={dir}
+        defaultValue="navigation"
+        className="flex min-h-0 flex-1 flex-col"
       >
-        <SheetHeader>
-          <MenuHeader />
-        </SheetHeader>
-
-        <TabsPrimitive.Root
-          dir={dir}
-          defaultValue="navigation"
-          className="flex min-h-0 flex-1 flex-col"
+        <TabsPrimitive.Content
+          value="navigation"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
         >
-          <TabsPrimitive.Content
-            value="navigation"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <NavigationContent className="flex-1 overflow-y-auto" />
-          </TabsPrimitive.Content>
-          <TabsPrimitive.Content
-            value="languages"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <LanguageContent className="flex min-h-0 flex-1 flex-col" />
-          </TabsPrimitive.Content>
-
-          <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
-            <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="languages" asChild>
-                  <FooterButton
-                    icon={Languages}
-                    name={MOBILE_LANGUAGE_BUTTON_NAME}
-                    data-testid="mobile-menu-language-picker"
-                  >
-                    <FooterItemText>{t("languages")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <ThemeToggleFooterButton />
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="navigation" asChild>
-                  <FooterButton
-                    icon={Menu}
-                    data-testid="mobile-menu-navigation-picker"
-                  >
-                    <FooterItemText>{t("menu")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-            </TabsPrimitive.List>
-          </SheetFooter>
-        </TabsPrimitive.Root>
-      </SheetContent>
-    </SheetCloseOnNavigate>
+          <NavigationContent className="flex-1 overflow-y-auto" />
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content
+          value="languages"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
+        >
+          <LanguageContent className="flex min-h-0 flex-1 flex-col" />
+        </TabsPrimitive.Content>
+
+        <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
+          <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="languages" asChild>
+                <FooterButton
+                  icon={Languages}
+                  name={MOBILE_LANGUAGE_BUTTON_NAME}
+                  data-testid="mobile-menu-language-picker"
+                >
+                  <FooterItemText>{t("languages")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <ThemeToggleFooterButton />
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="navigation" asChild>
+                <FooterButton
+                  icon={Menu}
+                  data-testid="mobile-menu-navigation-picker"
+                >
+                  <FooterItemText>{t("menu")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+          </TabsPrimitive.List>
+        </SheetFooter>
+      </TabsPrimitive.Root>
+    </MobileMenuClient>
   )
 }
 
diff --git a/src/components/ProductTable/MobileFilters.tsx b/src/components/ProductTable/MobileFilters.tsx
index 88d7d315d46..ec7b18d8c66 100644
--- a/src/components/ProductTable/MobileFilters.tsx
+++ b/src/components/ProductTable/MobileFilters.tsx
@@ -40,6 +40,7 @@ const MobileFilters = ({
   mobileFiltersLabel,
 }: MobileFiltersProps) => {
   const { t } = useTranslation("table")
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
 
   const handleOpenChange = (open: boolean) => {
     setMobileFiltersOpen(open)
@@ -59,6 +60,7 @@ const MobileFilters = ({
       <Sheet open={mobileFiltersOpen} onOpenChange={handleOpenChange}>
         <SheetTrigger className="px-4" asChild>
           <Button
+            ref={triggerRef}
             variant="outline"
             className="gap-4 border-0 ps-4"
             data-testid="mobile-filters-button"
@@ -74,12 +76,12 @@ const MobileFilters = ({
         </SheetTrigger>
       </Sheet>
 
-      {/* Persistent content that stays mounted after first render */}
       <PersistentPanel
         open={mobileFiltersOpen}
         side="left"
         className="flex h-full flex-col p-2"
         onOpenChange={handleOpenChange}
+        triggerRef={triggerRef}
       >
         <div className="sticky top-0 flex items-center justify-end p-2">
           <Button variant="ghost" onClick={handleClose}>
diff --git a/src/components/ui/persistent-panel.tsx b/src/components/ui/persistent-panel.tsx
index c65d8ddcc71..dffdd8c8796 100644
--- a/src/components/ui/persistent-panel.tsx
+++ b/src/components/ui/persistent-panel.tsx
@@ -1,5 +1,6 @@
 import * as React from "react"
 import { createPortal } from "react-dom"
+import { FocusScope } from "@radix-ui/react-focus-scope"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -9,6 +10,8 @@ interface PersistentPanelProps {
   className?: string
   children: React.ReactNode
   onOpenChange?: (open: boolean) => void
+  /** Ref to the trigger element - focus returns here on close */
+  triggerRef?: React.RefObject<HTMLElement | null>
 }
 
 /**
@@ -22,7 +25,7 @@ interface PersistentPanelProps {
  * - Lazy mount: only renders after first open
  * - Stays mounted: avoids re-render cost on subsequent opens
  * - Animated: slide-in/out transitions work correctly
- * - Accessible: escape key, overlay click, scroll lock, aria attributes
+ * - Accessible: escape key, overlay click, scroll lock, focus trap, aria attributes
  */
 const PersistentPanel = ({
   open,
@@ -30,6 +33,7 @@ const PersistentPanel = ({
   className,
   children,
   onOpenChange,
+  triggerRef,
 }: PersistentPanelProps) => {
   // Track if component should be in DOM (lazy mount, stays mounted after first open)
   const [isMounted, setIsMounted] = React.useState(false)
@@ -37,6 +41,7 @@ const PersistentPanel = ({
   const [showContent, setShowContent] = React.useState(false)
 
   const overlayRef = React.useRef<HTMLDivElement>(null)
+  const contentRef = React.useRef<HTMLDivElement>(null)
 
   // Mount component on first open
   React.useEffect(() => {
@@ -94,6 +99,29 @@ const PersistentPanel = ({
     }
   }, [showContent, isMounted])
 
+  // Track previous showContent state to detect visibility transitions
+  const prevShowContentRef = React.useRef(showContent)
+
+  // Handle focus on visibility transitions
+  // We use showContent (not open) because FocusScope trapped={showContent}
+  // must be false before focus can leave the panel
+  React.useEffect(() => {
+    const wasVisible = prevShowContentRef.current
+    prevShowContentRef.current = showContent
+
+    if (showContent && !wasVisible && contentRef.current) {
+      // Panel became visible: focus first element
+      const firstFocusable = contentRef.current.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+      firstFocusable?.focus()
+    } else if (!showContent && wasVisible) {
+      // Panel became hidden: restore focus to trigger
+      // This runs AFTER FocusScope trapped becomes false
+      triggerRef?.current?.focus()
+    }
+  }, [showContent, triggerRef])
+
   // Don't render until first open
   if (!isMounted) {
     return null
@@ -120,7 +148,6 @@ const PersistentPanel = ({
 
   return createPortal(
     <>
-      {/* Overlay */}
       <div
         ref={overlayRef}
         className={overlayClasses}
@@ -128,10 +155,16 @@ const PersistentPanel = ({
         aria-hidden="true"
       />
 
-      {/* Content */}
-      <div className={contentClasses} role="dialog" aria-modal="true">
-        {children}
-      </div>
+      <FocusScope trapped={showContent} loop={showContent} asChild>
+        <div
+          ref={contentRef}
+          className={contentClasses}
+          role="dialog"
+          aria-modal="true"
+        >
+          {children}
+        </div>
+      </FocusScope>
     </>,
     document.body
   )
diff --git a/src/components/ui/sheet-close-on-navigate.tsx b/src/components/ui/sheet-close-on-navigate.tsx
deleted file mode 100644
index 060c78abdd3..00000000000
--- a/src/components/ui/sheet-close-on-navigate.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useState } from "react"
-import { usePathname } from "next/navigation"
-
-import { Sheet as BaseSheet } from "./sheet"
-
-type BaseSheetProps = React.ComponentProps<typeof BaseSheet>
-
-const SheetCloseOnNavigate: React.FC<BaseSheetProps> = ({
-  children,
-  ...props
-}) => {
-  const pathname = usePathname()
-  const [open, setOpen] = useState(false)
-
-  React.useEffect(() => {
-    if (open) setOpen(false)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname])
-
-  return (
-    <BaseSheet open={open} onOpenChange={setOpen} {...props}>
-      {children}
-    </BaseSheet>
-  )
-}
-
-export { SheetCloseOnNavigate }
diff --git a/src/hooks/useCloseOnNavigate.ts b/src/hooks/useCloseOnNavigate.ts
new file mode 100644
index 00000000000..025d7b19aa5
--- /dev/null
+++ b/src/hooks/useCloseOnNavigate.ts
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import { usePathname } from "next/navigation"
+
+/**
+ * Hook that provides open/close state that automatically closes on navigation.
+ * Useful for modals, sheets, panels, etc. that should close when the user navigates.
+ */
+export function useCloseOnNavigate(initialOpen = false) {
+  const pathname = usePathname()
+  const [open, setOpen] = useState(initialOpen)
+
+  React.useEffect(() => {
+    if (open) setOpen(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  return [open, setOpen] as const
+}