feat(focus): Use focus-visible for all components - FRONT-3684

ec-europa · Jul 8, 2022 · 89def02 · 89def02
1 parent 7d9fad1
commit 89def02
Show file tree

Hide file tree

Showing 23 changed files with 67 additions and 65 deletions.
diff --git a/src/implementations/vanilla/components/accordion/accordion-ec.scss b/src/implementations/vanilla/components/accordion/accordion-ec.scss
@@ -41,7 +41,7 @@
   background-color: map.get(theme.$color, 'grey-25');
 }
 
-.ecl-accordion__toggle:focus {
+.ecl-accordion__toggle:focus-visible {
   outline: 2px solid map.get(theme.$color, 'yellow-100');
   outline-offset: -2px;
 }

diff --git a/src/implementations/vanilla/components/accordion/accordion-eu.scss b/src/implementations/vanilla/components/accordion/accordion-eu.scss
@@ -81,7 +81,7 @@
   box-shadow: 0 0 4px rgba(map.get(theme.$color, 'blue'), 0.2);
 }
 
-.ecl-accordion__toggle:focus {
+.ecl-accordion__toggle:focus-visible {
   border: 2px solid map.get(theme.$color, 'accent-blue-100');
   border-bottom-color: map.get(theme.$color, 'accent-blue-100') !important;
   outline: 0;

diff --git a/src/implementations/vanilla/components/breadcrumb/_breadcrumb.scss b/src/implementations/vanilla/components/breadcrumb/_breadcrumb.scss
@@ -83,7 +83,7 @@ $_ellispis-outline-width: null !default;
     color: $_ellipsis-color;
   }
 
-  &:focus {
+  &:focus-visible {
     margin: -$_ellispis-outline-width;
     padding: 0 $_ellipsis-padding-horizontal;
   }

diff --git a/src/implementations/vanilla/components/button/_button.scss b/src/implementations/vanilla/components/button/_button.scss
@@ -35,7 +35,7 @@ $_shadow-hover: null !default;
     text-decoration: none;
   }
 
-  &:focus {
+  &:focus-visible {
     border: $_outline-width solid $_outline-color;
     outline: none;
     padding: calc(#{$_padding-vertical} - #{$_outline-width})
@@ -177,7 +177,7 @@ $_cta-outline-color: null !default;
     background-color: $_cta-background-color-hover;
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: $_cta-outline-color;
   }
 

diff --git a/src/implementations/vanilla/components/carousel/_carousel.scss b/src/implementations/vanilla/components/carousel/_carousel.scss
@@ -100,7 +100,7 @@ $_outline-width: null !default;
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
   }
 }
@@ -120,7 +120,7 @@ $_outline-width: null !default;
 
   &:active,
   &:hover,
-  &:focus {
+  &:focus-visible {
     .ecl-carousel__icon-default {
       display: none;
     }
@@ -130,7 +130,7 @@ $_outline-width: null !default;
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
   }
 }
@@ -174,7 +174,7 @@ $_outline-width: null !default;
     background-color: map.get(theme.$color, 'white-100');
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
   }
 
@@ -273,7 +273,7 @@ $_outline-width: null !default;
   .ecl-carousel__prev {
     left: 0;
 
-    &:focus {
+    &:focus-visible {
       margin-inline-start: $_outline-width;
       padding-inline-start: calc(
         #{map.get(theme.$spacing, 's')} - #{$_outline-width}
@@ -284,7 +284,7 @@ $_outline-width: null !default;
   .ecl-carousel__next {
     right: 0;
 
-    &:focus {
+    &:focus-visible {
       margin-inline-end: $_outline-width;
       padding-inline-end: calc(
         #{map.get(theme.$spacing, 's')} - #{$_outline-width}

diff --git a/src/implementations/vanilla/components/category-filter/_category-filter.scss b/src/implementations/vanilla/components/category-filter/_category-filter.scss
@@ -37,7 +37,7 @@ $_outline-width: 3px !default;
     text-decoration: underline;
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: inset 0 0 0 3px $_outline-color;
     outline: none;
     text-decoration: none;

diff --git a/src/implementations/vanilla/components/checkbox/_checkbox.scss b/src/implementations/vanilla/components/checkbox/_checkbox.scss
@@ -160,7 +160,7 @@ $_outline-width: null !default;
 }
 
 // Focus, active state
-.ecl-checkbox__input:focus,
+.ecl-checkbox__input:focus-visible,
 .ecl-checkbox__input:active {
   + .ecl-checkbox__label
     > .ecl-checkbox__box:not(.ecl-checkbox__box--disabled) {

diff --git a/src/implementations/vanilla/components/datepicker/_datepicker.scss b/src/implementations/vanilla/components/datepicker/_datepicker.scss
@@ -65,15 +65,17 @@ $_picker-theme-color: null !default;
 }
 
 .ecl-datepicker__field:active + .ecl-datepicker__icon,
-.ecl-datepicker__field:focus + .ecl-datepicker__icon {
+.ecl-datepicker__field:focus-visible + .ecl-datepicker__icon {
   color: $_input-icon-focus-color;
 }
 
 .ecl-datepicker--invalid .ecl-datepicker__icon {
   color: $_input-icon-invalid-color;
 }
 
-.ecl-datepicker--invalid .ecl-datepicker__field:focus + .ecl-datepicker__icon,
+.ecl-datepicker--invalid
+  .ecl-datepicker__field:focus-visible
+  + .ecl-datepicker__icon,
 .ecl-datepicker--invalid .ecl-datepicker__field:hover + .ecl-datepicker__icon {
   color: $_input-icon-invalid-hover-color;
 }

diff --git a/src/implementations/vanilla/components/file-upload/file-upload.scss b/src/implementations/vanilla/components/file-upload/file-upload.scss
@@ -29,7 +29,7 @@
     text-decoration: none;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 3px solid map.get(theme.$color, 'yellow');
     outline-offset: -(3px);
     text-decoration: none;
@@ -56,7 +56,7 @@
 
     // stylelint-disable max-nesting-depth
     &:active,
-    &:focus {
+    &:focus-visible {
       outline: 3px solid map.get(theme.$color, 'yellow');
       outline-offset: -3px;
     }

diff --git a/src/implementations/vanilla/components/gallery/_gallery.scss b/src/implementations/vanilla/components/gallery/_gallery.scss
@@ -50,7 +50,7 @@ $_item-outline-offset: null !default;
   margin: 0;
 }
 
-.ecl-gallery__item-link:focus {
+.ecl-gallery__item-link:focus-visible {
   outline: none;
 
   .ecl-gallery__image-container {
@@ -246,7 +246,7 @@ $_overlay-links-hover-color: null !default;
   margin: map.get(theme.$spacing, '2xs');
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: $_overlay-links-hover-color;
   }
 }
@@ -292,7 +292,7 @@ $_overlay-links-hover-color: null !default;
   margin: $_arrow-margins;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: map.get(theme.$color, 'yellow-25');
   }
 }
@@ -306,7 +306,7 @@ $_overlay-links-hover-color: null !default;
   position: absolute;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: map.get(theme.$color, 'yellow-25');
   }
 }
@@ -342,7 +342,7 @@ $_overlay-links-hover-color: null !default;
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: $_overlay-links-hover-color;
   }
 

diff --git a/src/implementations/vanilla/components/inpage-navigation/_inpage-navigation.scss b/src/implementations/vanilla/components/inpage-navigation/_inpage-navigation.scss
@@ -48,7 +48,7 @@ $_outline: null !default;
     display: none;
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: map.get($_outline, 'color');
     outline: none;
   }
@@ -164,7 +164,7 @@ $_outline: null !default;
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline-offset: -(map.get($_outline, 'width'));
   }
 

diff --git a/src/implementations/vanilla/components/link/_link.scss b/src/implementations/vanilla/components/link/_link.scss
@@ -24,11 +24,11 @@ $_negative: null !default;
   text-decoration: underline;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: $_color-hover;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
     outline-offset: 2px;
   }
@@ -42,7 +42,7 @@ $_negative: null !default;
   color: $_color;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: $_color-hover;
   }
 }
@@ -82,7 +82,7 @@ $_negative: null !default;
   color: map.get($_negative, 'color');
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: map.get($_negative, 'color-hover');
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -101,7 +101,7 @@ $_negative: null !default;
 
     /* stylelint-disable-next-line */
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: map.get($_negative, 'color-hover');
 
       /* stylelint-disable-next-line */
@@ -122,14 +122,14 @@ $_negative: null !default;
   /* stylelint-disable */
   &:not(.ecl-link--icon) {
     &:hover,
-    &:focus {
+    &:focus-visible {
       text-decoration: underline;
     }
   }
 
   &.ecl-link--icon {
     &:hover .ecl-link__label,
-    &:focus .ecl-link__label {
+    &:focus-visible .ecl-link__label {
       text-decoration: underline;
     }
   }
@@ -150,7 +150,7 @@ $_negative: null !default;
     text-decoration: underline;
   }
 
-  &:focus {
+  &:focus-visible {
     border: $_outline-width solid $_outline-color;
     outline: none;
     padding: calc(#{map.get(theme.$spacing, 's')} - #{$_outline-width})
@@ -175,7 +175,7 @@ $_negative: null !default;
     color: map.get($_cta, 'color');
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: map.get($_cta, 'outline-color');
     color: map.get($_cta, 'color');
   }

diff --git a/src/implementations/vanilla/components/menu/_menu.scss b/src/implementations/vanilla/components/menu/_menu.scss
@@ -261,7 +261,7 @@ $_mobile-item-hover-background: null !default;
   margin-top: -#{map.get(theme.$spacing, 's')};
   padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'xs');
 
-  &:focus {
+  &:focus-visible {
     padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'xs');
   }
 }
@@ -286,8 +286,8 @@ $_mobile-item-hover-background: null !default;
   box-shadow: $_menu-open-button-shadow;
 }
 
-.ecl-menu__open:focus,
-.ecl-menu__close:focus {
+.ecl-menu__open:focus-visible,
+.ecl-menu__close:focus-visible {
   border-color: $_menu-open-focus-border;
   outline: none;
   padding: $_menu-open-button-padding;
@@ -354,7 +354,7 @@ $_mobile-item-hover-background: null !default;
   text-decoration: none;
   width: 100%;
 
-  &:focus {
+  &:focus-visible {
     outline: 3px solid $_menu-link-outline-color;
     outline-offset: -3px;
   }
@@ -492,14 +492,14 @@ $_mobile-item-hover-background: null !default;
       padding-inline-end: $_menu-link-padding-right;
     }
 
-    .ecl-menu__link:focus {
+    .ecl-menu__link:focus-visible {
       background-color: $_menu-link-focus-background;
       border: $_menu-link-border-width solid $_menu-link-border-focus-color;
       color: $_menu-link-focus-color;
       outline: none;
     }
 
-    .ecl-menu__item--current .ecl-menu__link:focus {
+    .ecl-menu__item--current .ecl-menu__link:focus-visible {
       padding-bottom: calc(4px - #{$_menu-link-border-width});
     }
   }
@@ -588,7 +588,7 @@ $_mobile-item-hover-background: null !default;
     text-decoration: underline;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 3px solid $_menu-link-outline-color;
     outline-offset: -3px;
   }
@@ -722,7 +722,7 @@ $_mobile-item-hover-background: null !default;
         background-color: transparent;
       }
 
-      &:focus {
+      &:focus-visible {
         outline-offset: $_menu-sublink-outline-offset;
       }
 

diff --git a/src/implementations/vanilla/components/news-ticker/_news-ticker.scss b/src/implementations/vanilla/components/news-ticker/_news-ticker.scss
@@ -119,7 +119,7 @@ $_outline-width: none !default;
 
   &:active,
   &:hover,
-  &:focus {
+  &:focus-visible {
     .ecl-news-ticker__icon-default {
       display: none;
     }
@@ -157,7 +157,7 @@ $_outline-width: none !default;
   display: flex;
   padding: map.get(theme.$spacing, 'xs');
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
   }
 }

diff --git a/src/implementations/vanilla/components/radio/_radio.scss b/src/implementations/vanilla/components/radio/_radio.scss
@@ -119,7 +119,7 @@ $_outline-color: null !default;
 }
 
 // Focus
-.ecl-radio__input:focus + .ecl-radio__label,
+.ecl-radio__input:focus-visible + .ecl-radio__label,
 .ecl-radio__input:active + .ecl-radio__label {
   .ecl-radio__box::before {
     // We can't use outline as this is a rounded box
@@ -135,7 +135,7 @@ $_outline-color: null !default;
   }
 }
 
-.ecl-radio__input:checked:focus + .ecl-radio__label,
+.ecl-radio__input:checked:focus-visible + .ecl-radio__label,
 .ecl-radio__input:checked:active + .ecl-radio__label {
   .ecl-radio__box::before {
     left: -#{$_box-border-width-checked};