Add visible outline to focused button (#2009)

The focus state of buttons should be clearly visible in all modes to help find the focused element. Buttons are especially important and therefore receive a special outline in a unique color. The colored outline can be set with CSS-variables.

gradle/changelog/visibe_focused_button.yaml

@@ -0,0 +1,4 @@
+- type: fixed
+  description: Make focused buttons clearly visible ([#2009](https://github.com/scm-manager/scm-manager/pull/2009))
+- type: fixed
+  description: Label on focused button in high-contrast mode has enough contrast ([#2009](https://github.com/scm-manager/scm-manager/pull/2009))

scm-ui/ui-styles/src/components/_main.scss

@@ -334,6 +334,16 @@ a.has-text-secondary-most:focus {
     }
   }
 
+  &:focus,
+  &.is-focused {
+    outline: $focus-outline-style;
+    outline-color: $focus-outline-color;
+    outline-offset: $focus-outline-offset;
+    &:not(:active) {
+      box-shadow: none !important;
+    }
+  }
+
   &.is-primary:hover,
   &.is-primary.is-hovered {
     background-color: scale-color($primary, $lightness: -10%);

scm-ui/ui-styles/src/highcontrast.scss

@@ -47,6 +47,7 @@ $text-strong: $white-bis;
 $code: lighten($red, 25%);
 
 $link-hover: $white-bis;
+$link-focus: $white-ter;
 
 $hr-background-color: $white-bis;
 

scm-ui/ui-styles/src/variables/_commons.scss

@@ -49,3 +49,8 @@ $input-border-color: $blue-light;
 
 /* Extensions */
 $popover-border-color: $white;
+
+/* Focus for Buttons */
+$focus-outline-color: #AF3EE7;
+$focus-outline-style: 3px solid;
+$focus-outline-offset: 2px;