Focus ring missing on main buttons for keyboard navigation

[pokutuna]

App Version

3.11.14

API Provider

OpenRouter

Model Used

N/A

Actual vs. Expected Behavior

Actual Behavior:
When using the keyboard (pressing Tab or Shift+Tab) to navigate the Roo interface, the main action buttons (like "Start New Task", "Resume Task", "Terminate") do not show any visual outline (focus ring) when they receive focus. This makes it difficult to tell which button is currently selected and will be activated by pressing Enter or Space.

Expected Behavior:
Buttons should show a visual focus indicator when they are selected via keyboard navigation, consistent with other UI elements and standard accessibility practices.

Detailed Steps to Reproduce

1. Open the Roo extension in VS Code.
2. Click inside the main text input area.
3. Press Shift+Tab on your keyboard. Focus should move to one of the main action buttons next to the input area.
4. Observe that the button receives focus (it can be activated by pressing Enter/Space), but there is no visible focus ring around it.

(repeatedly moving focus using Tab or Shift+Tab.)

2025-04-13.22.19.56.mov

Relevant API Request Output

(N/A for this UI bug or enhancement.)

Additional Context

The issue is caused by this css in webview-ui/src/index.css that disables the default focus outline for the VSCodeButton component:
https://github.com/RooVetGit/Roo-Code/blob/8bb3839b4d5b52803c97941e316a51d402bc6556/webview-ui/src/index.css#L186-L188

This style seems to be from the early development (claude-dev) and overrides the standard VS Code focus behavior.

There are other open issues related to focus behavior (often concerning state management about chat input), this specific problem is about button styling (outline) only. Therefore, this fix can be implemented independently.