Merge branch 'develop' into bugfix/improveReadonlyCodeEditorAppearance-CMEM-7723

Author: haschek

CHANGELOG.md

@@ -25,6 +25,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - border of the BlueprintJS `Tag` elements were fixed
 - `<CodeEditor />`
     - `readOnly` appearance uses same borders like read-only text fields and it does not display a blinking cursor
+- `<Button />`, `<IconButton />`
+    - outlines for focus by keyboard navigation are better recognizable on buttons with colored backgrounds (intent states)
 
 ### Changed
 

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);

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 {