From 9392aed4028b83a7e8e703ea26aa3f4559afebf2 Mon Sep 17 00:00:00 2001 From: jelveh Date: Wed, 29 Jul 2026 19:40:06 -0700 Subject: [PATCH] Dashboard: restyle keyboard focus ring on sidebar controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sidebar items (and the user/collapse/close buttons) had no :focus-visible style, so keyboard focus painted the UA's default blue ring — hard-edged and bleeding outside the item. Use the dashboard's own selection ring instead, tucked inside the control so it hugs the rounded corners. :focus-visible only, so mouse clicks never paint it. --- src/gui/src/css/dashboard.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css index 7fb19c522..d4f40feeb 100644 --- a/src/gui/src/css/dashboard.css +++ b/src/gui/src/css/dashboard.css @@ -479,6 +479,19 @@ body { font-weight: 500; } +/* Keyboard focus on the sidebar's controls: swap the UA's default blue + ring for the dashboard's own selection ring, hugging the control's + rounded corners from the inside. :focus-visible only, so a mouse click + (which also focuses these) never paints it. */ +.dashboard-sidebar-item:focus-visible, +.dashboard-user-btn:focus-visible, +.dashboard-sidebar-toggle:focus-visible, +.dashboard-sidebar-collapse-toggle:focus-visible, +.dashboard-sidebar-close:focus-visible { + outline: 2px solid var(--select-ring); + outline-offset: -2px; +} + /* User options button at bottom of sidebar */ .dashboard-user-options { border-top: 1px solid var(--dashboard-border);