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.
This commit is contained in:
parent
6c52697ad0
commit
04de91fc97
1 changed files with 7 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue