Merge pull request #163 from amaury-hanser/a11y/btn-focus

Improvement: Updates focus state for buttons
PrestaShop · Sep 21, 2021 · 54de322 · 54de322
2 parents 939125d + 4a02315
commit 54de322
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/dist/css/bootstrap-prestashop-ui-kit.css b/dist/css/bootstrap-prestashop-ui-kit.css
diff --git a/dist/css/bootstrap-prestashop-ui-kit.css.map b/dist/css/bootstrap-prestashop-ui-kit.css.map
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -26,7 +26,8 @@
 
     border-color: $gray-300;
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: $gray-300;
     }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -62,6 +62,7 @@ $warning: $yellow !default;
 $danger: $red !default;
 $light: $gray-100 !default;
 $dark: $gray-800 !default;
+$outline-color: #005fcc;
 
 $toast-success: #53d572 !default;
 $toast-warning: #fab000 !default;

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -25,8 +25,14 @@
   &:focus,
   &.focus {
     color: $white;
-    background-color: $background;
-    border-color: $background;
+    background-color: $hover-background;
+    border-color: $hover-border;
+  }
+
+  &:focus-visible {
+    // stylelint-disable-next-line
+    outline: 2px auto $outline-color !important;
+    outline-offset: 3px;
     box-shadow: none;
   }
 
@@ -65,6 +71,22 @@
 
   &:focus,
   &.focus {
+    color: $color-hover;
+    background-color: theme-color-hover($color-name);
+    border-color: theme-color-hover($color-name);
+    outline: 2px solid #005fcc;
+    outline-style: auto;
+    outline-offset: 3px;
+
+    &:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+
+  &:focus-visible {
+    // stylelint-disable-next-line
+    outline: 2px auto $outline-color !important;
+    outline-offset: 3px;
     box-shadow: none;
   }