From 303e7681686b0c88151f75f9777c281d08172e96 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 15 Dec 2022 15:41:23 -0600
Subject: [PATCH] toolbar/ActionButton: improve focus ring visibility

Since the button and the focus ring are both blue, we need a gap in
order to have enough contrast to see the focus ring.
---
 src/toolbar/ActionButton.tsx |  5 ++++-
 src/toolbar/toolbar.scss     | 26 ++++++++++++++++----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx
index 1e8660df..fa716374 100644
--- a/src/toolbar/ActionButton.tsx
+++ b/src/toolbar/ActionButton.tsx
@@ -110,7 +110,10 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                     aria-label={label}
                     elementRef={tooltipTargetRef as React.Ref<HTMLButtonElement>}
                     {...mergeProps(tooltipTargetProps, {
-                        className: classNames(enabled === false && Classes.DISABLED),
+                        className: classNames(
+                            'pb-toolbar-action-button',
+                            enabled === false && Classes.DISABLED,
+                        ),
                     })}
                     intent={Intent.PRIMARY}
                     onClick={handleClick}
diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss
index 37f9bc6b..81f09f72 100644
--- a/src/toolbar/toolbar.scss
+++ b/src/toolbar/toolbar.scss
@@ -19,18 +19,24 @@
             padding: 5px;
         }
     }
-}
 
-.pb-toolbar * {
-    box-shadow: unset !important;
-}
-
-.pb-toolbar-group {
-    &.pb-align-left {
-        margin-right: bp.$pt-grid-size * 2;
+    // override blueprint.js style
+    & * {
+        box-shadow: unset !important;
     }
 
-    &.pb-align-right {
-        margin-left: auto;
+    &-group {
+        &.pb-align-left {
+            margin-right: bp.$pt-grid-size * 2;
+        }
+
+        &.pb-align-right {
+            margin-left: auto;
+        }
+    }
+
+    &-action-button:focus-visible:not(.pb-focus-managed) {
+        // to get contrast since button background and focus ring are both blue
+        outline-offset: 4px;
     }
 }