From 347d904986cd5b036fc375d1d07cc42810a1a768 Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Thu, 21 Dec 2023 14:40:51 +0100
Subject: [PATCH 1/2] Added focus explicit styles for buttons

To comply with the laws of WCAG, we need a distinctive style for focused buttons.
This needs to be an outline with at least 2px wideness, and a clear difference in contrast
---
 .../Library/Buttons/button/buttons.scss        | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/stories/Library/Buttons/button/buttons.scss b/src/stories/Library/Buttons/button/buttons.scss
index 8bda48978..a6300b8dc 100644
--- a/src/stories/Library/Buttons/button/buttons.scss
+++ b/src/stories/Library/Buttons/button/buttons.scss
@@ -1,5 +1,6 @@
 $color__btn-border-active: $color__text-primary-black;
 $color__btn-border-disabled: $color__global-tertiary-2;
+$color__btn-filled-hover: $color__text-secondary-gray;
 
 .btn-icon {
   margin-left: $s-md;
@@ -25,12 +26,18 @@ $color__btn-border-disabled: $color__global-tertiary-2;
 
   @include typography($typo__button);
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     .btn-collapsible {
       display: block;
     }
   }
 
+  &:focus-visible {
+    outline: 2px solid black;
+    box-shadow: inset 0 0 0 3px white;
+  }
+
   &[disabled] {
     border: 1px solid $color__btn-border-disabled;
     color: $color__btn-border-disabled;
@@ -76,8 +83,10 @@ $color__btn-border-disabled: $color__global-tertiary-2;
   background-color: $color__text-primary-black;
   color: $color__text-primary-white;
 
-  &:hover {
-    opacity: 0.7;
+  &:hover,
+  &:focus-visible {
+    background-color: $color__btn-filled-hover;
+    border-color: $color__btn-filled-hover;
   }
 }
 
@@ -85,7 +94,8 @@ $color__btn-border-disabled: $color__global-tertiary-2;
   background-color: transparent;
   color: $color__text-primary-black;
 
-  &:not([disabled]):hover {
+  &:not([disabled]):hover,
+  &:not([disabled]):focus-visible {
     background-color: $color__text-primary-black;
     color: $color__text-primary-white;
   }

From e2b10757e7a131bce265827661c9f8c4ca01c925 Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Thu, 21 Dec 2023 14:48:02 +0100
Subject: [PATCH 2/2] Use color variables

---
 src/stories/Library/Buttons/button/buttons.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/Buttons/button/buttons.scss b/src/stories/Library/Buttons/button/buttons.scss
index a6300b8dc..d4e28a7b6 100644
--- a/src/stories/Library/Buttons/button/buttons.scss
+++ b/src/stories/Library/Buttons/button/buttons.scss
@@ -34,8 +34,8 @@ $color__btn-filled-hover: $color__text-secondary-gray;
   }
 
   &:focus-visible {
-    outline: 2px solid black;
-    box-shadow: inset 0 0 0 3px white;
+    outline: 2px solid $color__btn-border-active;
+    box-shadow: inset 0 0 0 3px $color__text-primary-white;
   }
 
   &[disabled] {