From f2a5ff2d092136c3ef82a65009c8bc65865cbf62 Mon Sep 17 00:00:00 2001
From: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Date: Thu, 14 Nov 2024 14:31:10 +0100
Subject: [PATCH] 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  | 4 ++++
 scm-ui/ui-styles/src/components/_main.scss | 8 ++++++--
 scm-ui/ui-styles/src/dark.scss             | 3 +++
 scm-ui/ui-styles/src/highcontrast.scss     | 3 +++
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 gradle/changelog/improve-focus-style.yaml

diff --git a/gradle/changelog/improve-focus-style.yaml b/gradle/changelog/improve-focus-style.yaml
new file mode 100644
index 0000000000..9307d937a5
--- /dev/null
+++ b/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
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 494c07048e..4ff4ec1d54 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/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 {
diff --git a/scm-ui/ui-styles/src/dark.scss b/scm-ui/ui-styles/src/dark.scss
index 9d01a9443d..84528167a0 100644
--- a/scm-ui/ui-styles/src/dark.scss
+++ b/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;
 
diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss
index 28f5b2eb16..18f244a881 100644
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/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;