From cf1d3e2880d59e81914c3d3874b20c411af6e40d Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Sun, 19 Jul 2026 16:47:49 +0200
Subject: [PATCH] trap focus

---
 src/components/AppShell.jsx   | 13 ++++++++++++-
 src/components/PageLayout.jsx |  1 +
 src/components/UserMenu.jsx   |  1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/AppShell.jsx b/src/components/AppShell.jsx
index e8edd71..8e0d1da 100644
--- a/src/components/AppShell.jsx
+++ b/src/components/AppShell.jsx
@@ -9,9 +9,20 @@ import { NAV_ITEMS } from '../nav';
 
 const SIDEBAR_WIDTH = 144;
 
+const FOCUSABLE =
+  'a, button, input, textarea, select, [role="button"], [role="menuitem"], [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+function preserveFocusOnBackground(e) {
+  if (e.target.closest(FOCUSABLE)) return;
+  e.preventDefault();
+}
+
 export default function AppShell() {
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+    <Box
+      onMouseDown={preserveFocusOnBackground}
+      sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}
+    >
       <Box
         component="nav"
         sx={(theme) => ({
diff --git a/src/components/PageLayout.jsx b/src/components/PageLayout.jsx
index c1401a7..fe944e3 100644
--- a/src/components/PageLayout.jsx
+++ b/src/components/PageLayout.jsx
@@ -35,6 +35,7 @@ export default function PageLayout({ title, subNav, basePath, children }) {
                   end={!segment}
                   aria-label={label}
                   disableRipple
+                  onMouseDown={(e) => e.preventDefault()}
                   sx={(theme) => ({
                     width: 80,
                     height: 80,
diff --git a/src/components/UserMenu.jsx b/src/components/UserMenu.jsx
index c7e7480..8ce14f6 100644
--- a/src/components/UserMenu.jsx
+++ b/src/components/UserMenu.jsx
@@ -20,6 +20,7 @@ export default function UserMenu() {
       <Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
         <IconButton
           onClick={(e) => setAnchorEl(e.currentTarget)}
+          onMouseDown={(e) => e.preventDefault()}
           sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
         >
           <Avatar src={user?.picture} alt={user?.email} sx={{ width: 32, height: 32 }}>