From 8130db577f77749397cd5ccdb6fc0ae569eb8f69 Mon Sep 17 00:00:00 2001
From: Daniel Lew <dlew@users.noreply.github.com>
Date: Mon, 2 Mar 2026 18:04:52 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A4=20fix:=20Add=20`inert`=20to=20Hidd?=
 =?UTF-8?q?en/Background=20Content=20(#12016)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When content is hidden (or in the background of the active form),
users shouldn't be allowed to access that content. However, right now,
you can use a keyboard (or screen reader) to move over to this content.

By adding `inert`, we make this content no longer accessible when hidden.

I've done this in two places:

- The sidebar is now inert when it's closed.

- When the sidebar is open & the window is small, the content area is
  inert (since it's mostly obscured by the sidebar).
---
 client/src/components/Nav/Nav.tsx | 1 +
 client/src/routes/Root.tsx        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 74883b94f4..cdee938663 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -225,6 +225,7 @@ const Nav = memo(
           aria-label={localize('com_ui_chat_history')}
           className="flex h-full flex-col px-2 pb-3.5"
           aria-hidden={!navVisible}
+          {...{ inert: !navVisible ? '' : undefined }}
         >
           <div className="flex flex-1 flex-col overflow-hidden" ref={outerContainerRef}>
             <MemoNewChat
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
index 3e6bff1457..b9adae032b 100644
--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@@ -88,6 +88,7 @@ export default function Root() {
                           }
                         : undefined
                     }
+                    {...{ inert: navVisible && isSmallScreen ? '' : undefined }}
                   >
                     <MobileNav navVisible={navVisible} setNavVisible={setNavVisible} />
                     <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />