Dashboard: restyle keyboard focus ring on sidebar controls

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.
This commit is contained in:
jelveh
2026-07-29 19:40:06 -07:00
parent 32e417fe79
commit 9392aed402
+13
View File
@@ -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);