From 4fc515cb6802c957b9794584498ff7d6fb0ef91e Mon Sep 17 00:00:00 2001 From: liukx0205 Date: Tue, 15 Sep 2026 13:55:50 +0800 Subject: [PATCH] fix(client): keep the ring on the triggers and off the menu rows The two split the other way around: the composer's triggers keep the focus ring their design gives them (a 2px `--dsw-alias-border-l3` ring), while a walked menu row shows the hover fill alone, without the browser's default outline doubling it. --- .../ui-model-selection/src/client/ModelSelect.module.css | 5 +---- .../src/client/PermissionSelect.module.css | 5 +---- packages/client/ui-primitives/src/Menu.module.css | 6 ++++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/client/ui-model-selection/src/client/ModelSelect.module.css b/packages/client/ui-model-selection/src/client/ModelSelect.module.css index fdec30ecf3..b2cb715287 100644 --- a/packages/client/ui-model-selection/src/client/ModelSelect.module.css +++ b/packages/client/ui-model-selection/src/client/ModelSelect.module.css @@ -34,10 +34,7 @@ } .trigger:focus-visible { - /* The same fill a hovered trigger gets: the trigger is one of the row-like - controls of the composer, and the ring its neighbours never drew read as a - different kind of state. */ - background: var(--dsw-alias-interactive-bg-hover); + box-shadow: 0 0 0 2px var(--dsw-alias-border-l3); } .trigger:disabled { diff --git a/packages/client/ui-permission-presets/src/client/PermissionSelect.module.css b/packages/client/ui-permission-presets/src/client/PermissionSelect.module.css index c7746273d1..32cc84dd14 100644 --- a/packages/client/ui-permission-presets/src/client/PermissionSelect.module.css +++ b/packages/client/ui-permission-presets/src/client/PermissionSelect.module.css @@ -23,10 +23,7 @@ } .trigger:focus-visible { - /* The same fill a hovered trigger gets: the trigger is one of the row-like - controls of the composer, and the ring its neighbours never drew read as a - different kind of state. */ - background: var(--dsw-alias-interactive-bg-hover); + box-shadow: 0 0 0 2px var(--dsw-alias-border-l3); } .trigger:disabled { diff --git a/packages/client/ui-primitives/src/Menu.module.css b/packages/client/ui-primitives/src/Menu.module.css index fd61361bb6..0525f2c6e4 100644 --- a/packages/client/ui-primitives/src/Menu.module.css +++ b/packages/client/ui-primitives/src/Menu.module.css @@ -117,10 +117,11 @@ } /* Arrow navigation moves real focus, so the row the keyboard is on carries the - same fill the pointer gets on top of the browser's own focus ring, which the - app's other controls keep too. */ + same fill the pointer gets: the fill is the row's focus indication, and the + browser's default ring would double it. */ .item:focus-visible:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); + outline: none; } .denseList .item { @@ -217,6 +218,7 @@ .danger:focus-visible:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); + outline: none; } /* Heading row: non-interactive small grey text, padding aligned with items. */