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; }