trap focus

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) => ({

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,

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 }}>