From dcdb0e48e49e95f15354effc8e4ff959a632e629 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Tue, 27 Oct 2026 13:09:29 +0800
Subject: [PATCH] fix(ui): Draw focus rings on controls only, not on focusable
 containers (#66)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The global :focus-visible outline loads after the module CSS with the same
specificity, so every focusable container without its own override (the
Intentions list, other list/tree/menu popups) got a square blue frame. ee99b36
patched the Select popup only. Like IDEA, rings now mark controls (buttons,
links, fields, checkboxes, tabs…); lists, trees, tables and popups show focus
through their selected row, and the few rows that drew frames use the hover
background instead.

Claude-Session: https://claude.ai/code/session_01VUYsdXA2nkF5v6zsC93dpn
---
 src/features/plugins/PluginsPage.module.css   |  4 ++--
 .../settings/components/Form.module.css       |  3 ---
 .../settings/languages/Sdk.module.css         |  5 ++---
 .../settings/pages/editor/Editor.module.css   |  3 ---
 .../tools/LanguageServersPage.module.css      |  4 ++--
 src/styles/global.css                         | 21 +++++++++++++++++++
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/features/plugins/PluginsPage.module.css b/src/features/plugins/PluginsPage.module.css
index 83bc88566..1f03caa78 100644
--- a/src/features/plugins/PluginsPage.module.css
+++ b/src/features/plugins/PluginsPage.module.css
@@ -155,8 +155,8 @@
   text-align: left;
 }
 .rowMain:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+  outline: none;
+  background: var(--bg-hover);
 }
 .rowName {
   overflow: hidden;
diff --git a/src/features/settings/components/Form.module.css b/src/features/settings/components/Form.module.css
index 150c9618d..688e14d73 100644
--- a/src/features/settings/components/Form.module.css
+++ b/src/features/settings/components/Form.module.css
@@ -172,9 +172,6 @@
   overflow: auto;
   outline: none;
 }
-.globList:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
 .globRow {
   display: flex;
   align-items: center;
diff --git a/src/features/settings/languages/Sdk.module.css b/src/features/settings/languages/Sdk.module.css
index a21b2d574..7543c69f4 100644
--- a/src/features/settings/languages/Sdk.module.css
+++ b/src/features/settings/languages/Sdk.module.css
@@ -96,9 +96,8 @@
 .table tbody tr.selected:hover {
   background: var(--bg-list-selected);
 }
-.table tbody tr:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+.table tbody tr:focus-visible:not(.selected) {
+  background: var(--bg-hover);
 }
 .versionCell {
   color: var(--fg-secondary);
diff --git a/src/features/settings/pages/editor/Editor.module.css b/src/features/settings/pages/editor/Editor.module.css
index 1c44fda50..a2dfc3292 100644
--- a/src/features/settings/pages/editor/Editor.module.css
+++ b/src/features/settings/pages/editor/Editor.module.css
@@ -144,9 +144,6 @@
   white-space: pre;
   outline: none;
 }
-.previewArea:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
 
 /* Color Scheme page */
 .schemeRow {
diff --git a/src/features/tools/LanguageServersPage.module.css b/src/features/tools/LanguageServersPage.module.css
index 6e510236c..d5f3d8968 100644
--- a/src/features/tools/LanguageServersPage.module.css
+++ b/src/features/tools/LanguageServersPage.module.css
@@ -108,8 +108,8 @@
   text-align: left;
 }
 .rowMain:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+  outline: none;
+  background: var(--bg-hover);
 }
 .rowName {
   flex: none;
diff --git a/src/styles/global.css b/src/styles/global.css
index 0be0ee87c..26666bbc0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -94,7 +94,28 @@ a:hover {
   color: var(--link-hover);
 }
 
+/* Focus rings mark controls only, as in IDEA: lists, trees, tables, menus, popups and other
+   focusable containers show focus through their selected row instead of a frame. */
 :focus-visible {
+  outline: none;
+}
+:is(
+  button,
+  a[href],
+  input,
+  select,
+  textarea,
+  summary,
+  [role="button"],
+  [role="link"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="switch"],
+  [role="tab"],
+  [role="combobox"],
+  [role="slider"],
+  [role="spinbutton"]
+):focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: -2px;
 }