From 1930a59e62f7ec669ea88bfbd6dd9429fcc118fe Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 17 Aug 2026 13:45:51 -0300
Subject: [PATCH 1/2] fix(button): give buttons a visible keyboard focus
 indicator

`.btn:focus-visible` set `box-shadow: none`, removing Bootstrap's focus ring
without replacing it, so every button in the app showed nothing on keyboard
focus. Text buttons partly got away with it via the underline on `.btn-link`;
icon-only buttons showed nothing at all.

Replaced with the outline BareButton already uses, so the two primitives
agree. WCAG 2.4.7.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/styles/project/_buttons.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/web/styles/project/_buttons.scss b/frontend/web/styles/project/_buttons.scss
index f6daca167d56..3cb62da8cdd2 100644
--- a/frontend/web/styles/project/_buttons.scss
+++ b/frontend/web/styles/project/_buttons.scss
@@ -9,8 +9,12 @@ button.btn {
   height: $btn-line-height;
   white-space: nowrap;
   color: white;
+  // Bootstrap's focus ring is a wide box-shadow glow; this replaces it with
+  // the same outline BareButton uses, so icon-only buttons show focus too.
   &:focus-visible {
     box-shadow: none;
+    outline: 2px solid var(--color-border-action);
+    outline-offset: 2px;
   }
 
   &-link {

From e631a73c41a1296e8faa007889cca001e6025ffc Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 17 Aug 2026 13:47:47 -0300
Subject: [PATCH 2/2] fix(button): only show focus styling for keyboard focus

Focus persists after a mouse click, so `:focus` left buttons looking pressed
until the user clicked elsewhere. `:focus-visible` limits the styling to
keyboard and programmatic focus. Revives the change from #7437, which was
closed unreviewed; that branch predates #7402 and no longer rebases cleanly.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/styles/project/_buttons.scss | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/web/styles/project/_buttons.scss b/frontend/web/styles/project/_buttons.scss
index 3cb62da8cdd2..9bd9d8665c1b 100644
--- a/frontend/web/styles/project/_buttons.scss
+++ b/frontend/web/styles/project/_buttons.scss
@@ -20,7 +20,7 @@ button.btn {
   &-link {
     color: $primary;
     &:hover,
-    &:focus {
+    &:focus-visible {
       background: transparent;
     }
     &.btn:active {
@@ -32,7 +32,7 @@ button.btn {
   &-danger {
     color: white;
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: white;
       background-color: $btn-danger-hover;
     }
@@ -48,7 +48,7 @@ button.btn {
   &-success {
     color: white;
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: white;
       background-color: $btn-success-hover;
     }
@@ -76,7 +76,7 @@ button.btn {
       color: $primary;
     }
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: $btn-outline-hover-bg;
       color: $primary;
     }
@@ -89,7 +89,7 @@ button.btn {
       border-color: $alert-danger-border-color !important;
       color: $danger !important;
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: $danger-alfa-8;
       }
       &.btn:active {
@@ -103,7 +103,7 @@ button.btn {
     background-color: $btn-secondary-bg !important;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: $btn-secondary-hover-bg !important;
       color: $body-color;
     }
@@ -118,7 +118,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;
     }
@@ -131,7 +131,7 @@ button.btn {
   &-success {
     background-color: $btn-success;
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: $btn-success-hover;
       color: $text-icon-light;
     }
@@ -160,7 +160,7 @@ button.btn {
     path {
       fill: var(--color-icon-secondary);
     }
-    &:hover,&:focus {
+    &:hover,&:focus-visible {
       background-color: $bg-light300;
       path {
         fill: var(--color-icon-default);
@@ -184,7 +184,7 @@ button.btn {
         }
       }
     }
-    &:focus {
+    &:focus-visible {
       background-color: $basic-alpha-8 !important;
       svg {
         path {
@@ -300,7 +300,7 @@ button.btn-link {
   text-transform: inherit;
   font-weight: 500;
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-text-action);
     background: transparent;
     text-decoration: underline;
@@ -356,7 +356,7 @@ $add-btn-size: 34px;
   .btn {
     &.btn-icon {
       color: $body-color-dark;
-      &:hover,&:focus {
+      &:hover,&:focus-visible {
         background-color: $bg-dark300;
       }
     }
@@ -364,7 +364,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 {
@@ -375,7 +375,7 @@ $add-btn-size: 34px;
     &.btn-success {
       background-color: $btn-success;
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: $btn-success-hover;
         color: $text-icon-light;
       }
@@ -397,7 +397,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;
       }
       &:active {