Merge pull request #408 from danskernesdigitalebibliotek/DDFLSBP-55-b…

…utton-focus Added explicit focus styles for buttons
danskernesdigitalebibliotek · Dec 27, 2023 · 60d0cc8 · 60d0cc8
2 parents 1d83fe3 + e2b1075
commit 60d0cc8
Showing 1 changed file with 14 additions and 4 deletions.
diff --git 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 $color__btn-border-active;
+    box-shadow: inset 0 0 0 3px $color__text-primary-white;
+  }
+
   &[disabled] {
     border: 1px solid $color__btn-border-disabled;
     color: $color__btn-border-disabled;
@@ -76,16 +83,19 @@ $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;
   }
 }
 
 .btn-outline {
   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;
   }