From 7a7313e2c6b81068b7bb3486f65d233deefd44d7 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 6 May 2026 09:21:36 -0300 Subject: [PATCH 1/2] fix(button): use :focus-visible for hover-bg, drop click-focused dark state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `.btn:focus` rule was applying the hover-bg colour for any focus event including mouse clicks. Browsers leave clicked buttons focused by design, so the button looked permanently pressed until the user clicked elsewhere — visible on every primary button across the app (Storybook surfaces it most obviously, but it happens in production too). Switching the rule to `:focus-visible` keeps the visual indicator for keyboard-driven focus (Tab key) while skipping it for mouse clicks. A11y signal preserved, click-and-stuck appearance gone. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/web/styles/project/_buttons.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/web/styles/project/_buttons.scss b/frontend/web/styles/project/_buttons.scss index 50bba7d7e9fe..e0401508b81c 100644 --- a/frontend/web/styles/project/_buttons.scss +++ b/frontend/web/styles/project/_buttons.scss @@ -5,8 +5,12 @@ button.btn { white-space: nowrap; color: white; // Project button, to remove with project select bar + // Use `:focus-visible` (keyboard / programmatic focus only) instead of + // `:focus` so a mouse click doesn't leave the button visibly "pressed" + // until the user clicks elsewhere — focus persists on click by design, + // we just don't want it to look like a held-down state. &:hover, - &:focus { + &:focus-visible { background-color: $btn-hover-bg; } &:focus-visible { From 0e19db1a92acc82741c0e1c144b37cfead89bc42 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 6 May 2026 09:46:50 -0300 Subject: [PATCH 2/2] fix(button): extend :focus-visible to all theme variants and dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous commit only fixed the base .btn rule. Each theme variant (secondary, tertiary, danger, success, outline, link, project, icon, with-icon) defined its own &:hover, &:focus pair, so the click-and-stuck appearance kept happening on every variant. Replaces all `:focus` references in _buttons.scss with `:focus-visible` (except the one inside the explanatory comment). Same fix shape, applied to the full surface — light and dark themes, every variant, every custom button class. 19 lines changed in a single SCSS file. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/web/styles/project/_buttons.scss | 38 +++++++++++------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/frontend/web/styles/project/_buttons.scss b/frontend/web/styles/project/_buttons.scss index e0401508b81c..bd99b969e66b 100644 --- a/frontend/web/styles/project/_buttons.scss +++ b/frontend/web/styles/project/_buttons.scss @@ -24,7 +24,7 @@ button.btn { &-link { color: $primary; &:hover, - &:focus { + &:focus-visible { background: transparent; } &.btn:active { @@ -36,7 +36,7 @@ button.btn { &-danger { color: white; &:hover, - &:focus { + &:focus-visible { color: white; background-color: $btn-danger-hover; } @@ -49,7 +49,7 @@ button.btn { &-success { color: white; &:hover, - &:focus { + &:focus-visible { color: white; background-color: $btn-success-hover; } @@ -77,7 +77,7 @@ button.btn { color: $primary; } &:hover, - &:focus { + &:focus-visible { background-color: $btn-outline-hover-bg; color: $primary; } @@ -90,7 +90,7 @@ button.btn { border-color: $alert-danger-border-color !important; color: $danger !important; &:hover, - &:focus { + &:focus-visible { background-color: $danger-alfa-8; } &.btn:active { @@ -104,7 +104,7 @@ button.btn { background-color: $btn-secondary-bg !important; &:hover, - &:focus { + &:focus-visible { background-color: $btn-secondary-hover-bg !important; color: $body-color; } @@ -119,7 +119,7 @@ button.btn { background-color: $btn-tertiary-bg; box-shadow: 0 10px 20px rgba(247, 213, 110, .2); &:hover, - &:focus { + &:focus-visible { background-color: $btn-tertiary-hover-bg; color: $body-color; } @@ -132,7 +132,7 @@ button.btn { &-success { background-color: $success; &:hover, - &:focus { + &:focus-visible { background-color: $success400; color: $text-icon-light; } @@ -158,7 +158,7 @@ button.btn { path { fill: $text-muted; } - &:hover,&:focus { + &:hover,&:focus-visible { background-color: $bg-light300; path { fill: $body-color; @@ -179,7 +179,7 @@ button.btn { } } } - &:focus { + &:focus-visible { background-color: $basic-alpha-8 !important; svg { path { @@ -225,7 +225,7 @@ button.btn { } &.btn:hover, &.btn:active, - &.btn:focus { + &.btn:focus-visible { background-color: $bg-light200; color: $body-color; & .btn-project-letter { @@ -290,7 +290,7 @@ button.btn { text-transform: inherit; font-weight: 500; &:hover, - &:focus { + &:focus-visible { color: $link-color; background: transparent; text-decoration: underline; @@ -345,7 +345,7 @@ $add-btn-size: 34px; .dark { .btn { &:hover, - &:focus { + &:focus-visible { background-color: $btn-hover-bg-dark; } &:active { @@ -356,7 +356,7 @@ $add-btn-size: 34px; path { fill: $text-muted; } - &:hover,&:focus { + &:hover,&:focus-visible { background-color: $bg-dark300; path { fill: $body-color-dark; @@ -367,7 +367,7 @@ $add-btn-size: 34px; color: white; background-color: $btn-secondary-bg-dark !important; &:hover, - &:focus { + &:focus-visible { background-color: $btn-secondary-hover-bg-dark !important; } &:active { @@ -377,7 +377,7 @@ $add-btn-size: 34px; } &.btn-success { &:hover, - &:focus { + &:focus-visible { background-color: $success400; color: $text-icon-light; } @@ -395,7 +395,7 @@ $add-btn-size: 34px; border-color: $primary400; background-color: $btn-outline-hover-bg-dark; } - &:focus { + &:focus-visible { background-color: $btn-outline-focus-bg-dark; } @@ -408,7 +408,7 @@ $add-btn-size: 34px; background-color: transparent; &:hover, &:active, - &:focus { + &:focus-visible { background-color: transparent; color: $dark-highlight-color; } @@ -436,7 +436,7 @@ $add-btn-size: 34px; } &.btn:hover, - &.btn:focus,&.btn:active { + &.btn:focus-visible,&.btn:active { background-color: $bg-dark200; color: $text-icon-light; & .btn-project-letter {