From 1a4bd346281e6447215074dff38f7ccb5c2dab57 Mon Sep 17 00:00:00 2001 From: Luke Melia Date: Thu, 4 Jun 2026 18:25:21 -0400 Subject: [PATCH] Give the selection menu a distinguishable keyboard focus ring MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CS-11328. The highlight (primary) selection-menu trigger drew its focus ring in --boxel-highlight — the same color as its fill — so it was invisible. (And boxel-ui's unlayered global `button:focus` rule overrides BoxelButton's own layered focus styles, so a fix on the button component wouldn't take.) Set the ring at the component level: a lighter-but-saturated tint of the current fill (color-mix 70% fill / 30% white), sitting snug 1px outside — matching Burcu's mockup. It stays visible against the highlight and tracks the fill as it darkens when the menu opens. Verified live in the CardHeader and chooser. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../addon/src/components/selection-menu/index.gts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/boxel-ui/addon/src/components/selection-menu/index.gts b/packages/boxel-ui/addon/src/components/selection-menu/index.gts index a1ee2abc37..be491780de 100644 --- a/packages/boxel-ui/addon/src/components/selection-menu/index.gts +++ b/packages/boxel-ui/addon/src/components/selection-menu/index.gts @@ -102,14 +102,19 @@ export default class SelectionMenu extends Component { --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs); --boxel-button-min-width: 0; } - /* Keyboard focus ring just outside the button. (Set explicitly so it - renders regardless of the global button outline setup.) */ + /* Keyboard focus ring: a lighter tint of the current fill, so it stays + visible against the highlight button (a highlight-colored ring would + blend into it) while tracking the fill as it darkens. Sits snug + against the button (1px) rather than floating off it. Defined here + rather than on BoxelButton because boxel-ui's unlayered global + `button:focus` rule overrides the button's own layered focus styles. */ .selection-menu-trigger:focus-visible { outline: var(--boxel-outline-width) var(--boxel-outline-style) - var(--boxel-highlight); - outline-offset: 2px; + color-mix(in oklab, var(--boxel-button-color) 70%, white); + outline-offset: 1px; } - /* Deepen the fill while the menu is open, matching Button's hover. */ + /* Deepen the fill while the menu is open, matching Button's hover; the + focus ring's color-mix tracks the fill, so it darkens to match. */ .selection-menu-trigger[aria-expanded='true'] { --boxel-button-color: var(--boxel-highlight-hover); }