Improve focus styles

Pushed-by: Philipp Ahrendt<philipp.ahrendt@cloudogu.com>
Co-authored-by: Thomas Zerr<thomas.zerr@cloudogu.com>
Pushed-by: Thomas Zerr<thomas.zerr@cloudogu.com>
Co-authored-by: Philipp Ahrendt<philipp.ahrendt@cloudogu.com>

gradle/changelog/improve-focus-style.yaml

@@ -0,0 +1,4 @@
+- type: changed
+  description: Improved contrast for focus indicator in dark and high contrast mode
+- type: changed
+  description: Not showing the focus indicator, when using a pointer device

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

@@ -357,7 +357,7 @@ a.has-text-secondary-most:focus {
 }
 
 a {
-  &:focus,
+  &:focus-visible,
   &.is-focused {
     outline: $focus-outline-color 2px solid;
     outline-offset: 1px;
@@ -365,7 +365,7 @@ a {
 }
 
 button, .button {
-  &:focus,
+  &:focus-visible,
   &.is-focused {
     outline: $focus-outline-color $focus-outline-style;
     outline-offset: $focus-outline-offset;
@@ -861,6 +861,10 @@ form .field:not(.is-grouped) {
       color: $link;
       background-color: $scheme-main;
     }
+
+    &:focus-visible {
+      outline-offset: -4px;
+    }
   }
 
   > li {

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

@@ -70,6 +70,9 @@ $button-active-color: lighten($text-strong, 2.5%);
 
 $table-row-hover-background-color: $grey-darker;
 
+/* Focus for Buttons */
+$focus-outline-color: #C777EE;
+
 /* Components */
 $card-background-color: $box-background-color;
 

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

@@ -58,6 +58,9 @@ $box-background-color: $grey-darker;
 
 $table-row-hover-background-color: $grey-darker;
 
+/* Focus for Buttons */
+$focus-outline-color: #C777EE;
+
 /* Components */
 $menu-label-color: $scheme-main;
 $menu-item-color: $white-ter;