From 04de91fc970806941de72b4273f49655165197b9 Mon Sep 17 00:00:00 2001
From: danielhanchen <michaelhan2050@gmail.com>
Date: Wed, 20 May 2026 03:14:12 +0000
Subject: [PATCH] studio: mark closed chat configuration aside as inert

The desktop right-rail ChatSettingsPanel collapses to width:0 with
overflow:hidden when closed, but its inner controls (Close button,
sliders, system-prompt textarea, etc.) stay mounted in the DOM. Without
inert they remain in the keyboard focus order and the accessibility
tree: pressing Tab a few times from /chat lands focus on the off-screen
"Close configuration" button, and screen readers announce panel controls
as available even though nothing is visible.

Setting inert={!open} on the aside removes the closed subtree from focus
and AT semantics. The open path is unchanged.
---
 studio/frontend/src/features/chat/chat-settings-sheet.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index 1ed0a88b63..507640a883 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -1500,6 +1500,13 @@ export function ChatSettingsPanel({
 
   return (
     <aside
+      // When `open` is false the aside collapses to width 0 with
+      // overflow:hidden, but its inner controls remain in the DOM
+      // (Configuration heading, Close button, sliders, etc). Without
+      // `inert`, keyboard users Tab into off-screen focusable controls
+      // and screen readers announce them as available. `inert` also
+      // sets aria-hidden semantics so AT skips the subtree entirely.
+      inert={!open}
       className={`relative z-50 shrink-0 h-full overflow-hidden bg-panel-surface text-panel-surface-fg font-heading ${open ? "w-[17rem] border-l border-sidebar-border" : "w-0"}`}
     >
       <div className="h-full w-full">{settingsContent}</div>