[BUG][A11Y] Roo-Code steals focus on load when using VSCode over SSH (WCAG 3.2.1, 3.2.2 violation) [COM-360]

[lemiesz]

Description

When running VSCode over SSH, Roo-Code can take 1-2 seconds to fully load. During this delay, users may start typing in other parts of VSCode (e.g., the integrated terminal). When Roo-Code finishes loading, it automatically steals focus to its input text box, causing the user to inadvertently type into Roo-Code instead of their intended target.

Steps to Reproduce

1. Connect to a remote server via SSH in VSCode
2. Open VSCode (or reload the window)
3. Immediately start typing in the integrated terminal while Roo-Code is still loading
4. Observe that when Roo-Code loads, focus shifts to the Roo-Code input box
5. Notice that your terminal input is now being typed into the Roo-Code text box instead

Expected Behavior

Roo-Code should not automatically steal focus from other elements when it finishes loading. Focus should remain where the user placed it.

Actual Behavior

Roo-Code takes focus when it loads, interrupting the user's workflow and causing them to type in the wrong location.

Accessibility Impact

This behavior violates WCAG 2.1 accessibility criteria:

• WCAG 3.2.1 (On Focus): Components should not initiate a change of context when they receive focus
• WCAG 3.2.2 (On Input): Changing the setting of a user interface component should not automatically cause a change of context unless the user has been advised

These are Level A criteria, meaning they are fundamental accessibility requirements.

Environment

• VSCode: Remote SSH connection
• Roo-Code: Latest version
• Network: Variable latency (SSH over network)

Suggested Fix

• Do not auto-focus the Roo-Code input box on extension load
• If auto-focus is desired, add a user setting to disable this behavior
• Consider checking if the user is already interacting with another element before taking focus

Related Issues

This is distinct from previous focus-stealing issues (#8840, #2122, #4784) which were about focus stealing during file edits. This issue is specifically about initial extension load.

---

Labels: bug, accessibility, a11y, WCAG
Priority: Medium (affects user experience and accessibility compliance)

[roomote]

I have analyzed this issue and here is my proposed implementation plan:

Root Cause Analysis

The focus-stealing behavior on initial load is caused by three locations in the webview code:

1. webview-ui/src/components/chat/ChatTextArea.tsx line 1083: The DynamicTextArea component has autoFocus={true} unconditionally set
2. webview-ui/src/components/chat/ChatView.tsx lines 806-808: The didBecomeVisible action unconditionally calls textAreaRef.current?.focus()
3. webview-ui/src/components/chat/ChatView.tsx lines 1004-1011: A useDebounceEffect hook automatically focuses the textarea when certain conditions are met (not hidden, sending enabled, no buttons)

Proposed Solution

Good news: The preventFocusDisruption experiment already exists in the codebase (defined in src/shared/experiments.ts). It is currently used only for file editing operations (diff view) but can be extended to cover this initial load case.

The experiments object is already synced to the webview via the extension state, so we can access it via useExtensionState().

Changes Required

1. Modify ChatTextArea.tsx:

   • Pass preventFocusDisruption as a new prop (or access it via useExtensionState())
   • Change autoFocus={true} to autoFocus={!preventFocusDisruption}

2. Modify ChatView.tsx:

   • Import experiments from useExtensionState()
   • Gate the didBecomeVisible focus call: only focus if !experiments?.preventFocusDisruption
   • Gate the useDebounceEffect focus: only focus if !experiments?.preventFocusDisruption

This approach:

• Reuses an existing experiment flag rather than adding new settings
• Is a surgical, minimal change (3 files modified)
• Allows users to enable this via Settings > Experimental > Prevent Focus Disruption
• Maintains backward compatibility (default is false, so current behavior is preserved)

Please mention @roomote in a comment saying that you approve this plan, and I will proceed with the implementation.

[lemiesz]

@roomote I approve

[roomote]

Thanks for the approval! I'll start implementing the fix now. The changes will gate the auto-focus behavior behind the existing preventFocusDisruption experiment flag in ChatTextArea.tsx and ChatView.tsx. I'll open a draft PR shortly with my progress.

[lemiesz]

@roomote
Are you stuck?

[lemiesz]

@roomote where is the PR

[roomote]

Apologies for the delay. I am picking this up now and will implement the fix as outlined in the plan. A draft PR will be opened shortly.

[roomote]

Opened a PR with my attempt at addressing this: #10529

The fix gates the auto-focus behavior behind the existing preventFocusDisruption experiment flag. Users can enable this via Settings > Experimental > Prevent Focus Disruption to prevent focus stealing during initial load.

Feedback welcome!