From 94f96fab2337cdad7031c6b59622ff27c6734cdd Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 6 Jul 2026 15:52:30 +0200
Subject: [PATCH] improve visibility of focus outlines inside and outside of
 buttons with colored backgrounds

---
 CHANGELOG.md                      | 2 ++
 src/components/Button/button.scss | 5 +++++
 src/components/Icon/icon.scss     | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6eb665ad..f822187e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<MultiSelect />`
     - border of the BlueprintJS `Tag` elements were fixed
+- `<Button />`, `<IconButton />`
+    - outlines for focus by keyboard navigation are better recognizable on buttons with colored backgrounds (intent states)
 
 ### Changed
 
diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index 58002952..8a473563 100644
--- a/src/components/Button/button.scss
+++ b/src/components/Button/button.scss
@@ -116,6 +116,11 @@ $button-intents: (
             @include pt-button-intent(map.get($button-intents, $intentvalue)...);
         }
 
+        &:focus-visible {
+            box-shadow: inset 0 0 0 $eccgui-size-inline-whitespace * 0.6
+                #{eccgui-color-var("identity", "background", "100")} !important;
+        }
+
         &.#{$ns}-minimal,
         &.#{$ns}-outlined {
             color: list.nth(map.get($button-intents, $intentvalue), 1);
diff --git a/src/components/Icon/icon.scss b/src/components/Icon/icon.scss
index 47044cef..a2b4059f 100644
--- a/src/components/Icon/icon.scss
+++ b/src/components/Icon/icon.scss
@@ -55,6 +55,12 @@ svg.#{$eccgui}-icon {
     & > .#{$eccgui}-tooltip__wrapper + .#{$ns}-button-text {
         margin-left: 0;
     }
+
+    &[class*="#{$ns}-intent-"] {
+        .#{$eccgui}-tooltip__wrapper [tabindex="0"] {
+            outline-color: currentcolor;
+        }
+    }
 }
 
 .#{$eccgui}-menu__item {