feat(patterns/button): improve button focus for accessibility (#746)

adeo · Mar 2, 2021 · aa5e98c · aa5e98c
1 parent 4f0d48c
commit aa5e98c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 13 deletions.
diff --git a/packages/styles/components/_c.button.scss b/packages/styles/components/_c.button.scss
@@ -11,7 +11,9 @@
 
   &:focus {
     @include add-demo-state-class {
-      box-shadow: 0 1px 5px 0 rgba($color-grey-999, 0.2);
+      box-shadow:
+        0 0 0 ($mu025/2) $color-font-lightest,
+        0 0 0 $mu025 $color-info-500;
     }
   }
 

diff --git a/packages/styles/settings-tools/_s.buttons.scss b/packages/styles/settings-tools/_s.buttons.scss
@@ -113,18 +113,6 @@ $button-color-default: map-get(get-token(color, button, 'solid'), 'font');
     }
   }
 
-  @if map-has-key($props, 'focus') {
-    $focus-props: map-get($props, 'focus');
-
-    @each $prop, $value in $focus-props {
-      &:focus {
-        @include add-demo-state-class {
-          border-color: map-get($focus-props, 'border');
-        }
-      }
-    }
-  }
-
   @if map-has-key($props, 'active') {
     $active-props: map-get($props, 'active');