diff --git a/src/implementations/vanilla/components/accordion/accordion-ec.scss b/src/implementations/vanilla/components/accordion/accordion-ec.scss
index 7ed859b48e2..05a63b2731d 100644
--- 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
index d051cf6b32a..2527a6afb31 100644
--- 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
index baa49a9b55e..dcdd033f400 100644
--- 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
index 8db53e4756b..d7393e61897 100644
--- 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
index 73591f437a5..efad86d1d0a 100644
--- 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
index 001fa9d13d6..02870ef66c4 100644
--- 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
index ba2c33a7fd4..9603e629063 100644
--- 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
index c20a17a1c47..5df8bb1f33d 100644
--- a/src/implementations/vanilla/components/datepicker/_datepicker.scss
+++ b/src/implementations/vanilla/components/datepicker/_datepicker.scss
@@ -65,7 +65,7 @@ $_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;
 }
 
@@ -73,7 +73,9 @@ $_picker-theme-color: null !default;
   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
index 25ad33d2d72..d82c8a2fc94 100644
--- 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
index 42789a63054..52426d9bb38 100644
--- 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
index c09fe1c3f02..18352f98fcc 100644
--- 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
index 8e1cbc2abbb..ee716b94156 100644
--- 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
index 32807c8d71d..f9d3b325013 100644
--- 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
index 5fa0d5658aa..80161b2ac50 100644
--- 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
index bd6fc1d2f21..c3f34157227 100644
--- 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};
diff --git a/src/implementations/vanilla/components/search-form/_search-form.scss b/src/implementations/vanilla/components/search-form/_search-form.scss
index 29a8c155849..e5d2827d007 100644
--- a/src/implementations/vanilla/components/search-form/_search-form.scss
+++ b/src/implementations/vanilla/components/search-form/_search-form.scss
@@ -67,7 +67,7 @@ $_button-outline-width: null !default;
     background-color: $_button-background-color-hover;
   }
 
-  &:focus {
+  &:focus-visible {
     padding-inline-start: calc(
       #{map.get(theme.$spacing, 's')} - #{$_button-outline-width}
     );
@@ -113,7 +113,7 @@ $_button-outline-width: null !default;
     );
   }
 
-  .ecl-search-form__button:focus {
+  .ecl-search-form__button:focus-visible {
     padding-inline-start: calc(
       #{map.get(theme.$spacing, 'm')} - #{$_button-outline-width}
     );
diff --git a/src/implementations/vanilla/components/select/_select.scss b/src/implementations/vanilla/components/select/_select.scss
index 98486266ee3..aab806b6fb5 100644
--- a/src/implementations/vanilla/components/select/_select.scss
+++ b/src/implementations/vanilla/components/select/_select.scss
@@ -72,7 +72,7 @@ $_multiple-checkbox-label-vertical-padding: null !default;
     box-shadow: $_shadow-hover;
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: $_border-color-focus;
     border-width: $_border-width-focus;
     box-shadow: $_shadow-hover;
diff --git a/src/implementations/vanilla/components/site-header/site-header-ec.scss b/src/implementations/vanilla/components/site-header/site-header-ec.scss
index 2dce1cf8bee..f939eb1d372 100644
--- a/src/implementations/vanilla/components/site-header/site-header-ec.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-ec.scss
@@ -104,13 +104,13 @@ $_search-width-xl: 31.5rem;
 .ecl-site-header__search-toggle {
   padding: map.get(theme.$spacing, 'xs');
 
-  &:focus {
+  &:focus-visible {
     padding: calc(#{map.get(theme.$spacing, 'xs')} - 3px)
       calc(#{map.get(theme.$spacing, 'xs')} - 3px);
   }
 
   &[aria-expanded='true'],
-  &[aria-expanded='true']:focus {
+  &[aria-expanded='true']:focus-visible {
     background-color: map.get(theme.$color, 'blue-5');
     border-color: map.get(theme.$color, 'blue-25');
     border-style: solid;
@@ -347,13 +347,13 @@ $_search-width-xl: 31.5rem;
   .ecl-site-header__search-toggle {
     padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm');
 
-    &:focus {
+    &:focus-visible {
       padding: calc(#{map.get(theme.$spacing, 's')} - 3px)
         calc(#{map.get(theme.$spacing, 'm')} - 3px);
     }
 
     &[aria-expanded='true'],
-    &[aria-expanded='true']:focus {
+    &[aria-expanded='true']:focus-visible {
       margin-bottom: -#{map.get(theme.$spacing, 'l')};
       padding: calc(#{map.get(theme.$spacing, 's')} - 1px)
         calc(#{map.get(theme.$spacing, 'm')} - 1px);
diff --git a/src/implementations/vanilla/components/site-header/site-header-eu.scss b/src/implementations/vanilla/components/site-header/site-header-eu.scss
index 7e120bb65bd..3c60292f747 100644
--- a/src/implementations/vanilla/components/site-header/site-header-eu.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-eu.scss
@@ -111,13 +111,13 @@ $_search-width-xl: 31.5rem;
 .ecl-site-header__search-toggle {
   padding: map.get(theme.$spacing, 'xs');
 
-  &:focus {
+  &:focus-visible {
     padding: calc(#{map.get(theme.$spacing, 'xs')} - 2px)
       calc(#{map.get(theme.$spacing, 'xs')} - 2px);
   }
 
   &[aria-expanded='true'],
-  &[aria-expanded='true']:focus {
+  &[aria-expanded='true']:focus-visible {
     background-color: map.get(theme.$color, 'blue-5');
     border-end-start-radius: 0;
     border-end-end-radius: 0;
@@ -388,13 +388,13 @@ $_search-width-xl: 31.5rem;
   .ecl-site-header__search-toggle {
     padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm');
 
-    &:focus {
+    &:focus-visible {
       padding: calc(#{map.get(theme.$spacing, 's')} - 2px)
         calc(#{map.get(theme.$spacing, 'm')} - 2px);
     }
 
     &[aria-expanded='true'],
-    &[aria-expanded='true']:focus {
+    &[aria-expanded='true']:focus-visible {
       margin-bottom: -#{map.get(theme.$spacing, 'l')};
       padding: calc(#{map.get(theme.$spacing, 's')} - 1px)
         calc(#{map.get(theme.$spacing, 'm')} - 1px);
diff --git a/src/implementations/vanilla/components/skip-link/skip-link.scss b/src/implementations/vanilla/components/skip-link/skip-link.scss
index 88941fd8b7f..22c1eb662ec 100644
--- a/src/implementations/vanilla/components/skip-link/skip-link.scss
+++ b/src/implementations/vanilla/components/skip-link/skip-link.scss
@@ -27,7 +27,7 @@
   z-index: map.get(theme.$z-index, 'highlight');
 
   &:active,
-  &:focus {
+  &:focus-visible {
     clip: auto;
     clip-path: none;
     height: auto;
diff --git a/src/implementations/vanilla/components/tabs/_tabs.scss b/src/implementations/vanilla/components/tabs/_tabs.scss
index bf2b8a67e13..a92e42484b6 100644
--- a/src/implementations/vanilla/components/tabs/_tabs.scss
+++ b/src/implementations/vanilla/components/tabs/_tabs.scss
@@ -54,7 +54,7 @@ $_outline-width: none !default;
   padding: map.get(theme.$spacing, 'm') map.get(theme.$spacing, 's');
   text-decoration: none;
 
-  &:focus {
+  &:focus-visible {
     outline-offset: -2px;
   }
 
@@ -94,7 +94,7 @@ $_outline-width: none !default;
   font-weight: map.get(theme.$font-weight, 'bold');
   position: relative;
 
-  &:not(:focus) {
+  &:not(:focus-visible) {
     border-color: transparent;
   }
 
@@ -122,7 +122,7 @@ $_outline-width: none !default;
     width: 100%;
   }
 
-  &:focus::before {
+  &:focus-visible::before {
     content: none;
   }
 }
@@ -191,7 +191,7 @@ $_outline-width: none !default;
   top: 50%;
   transform: translateY(-50%);
 
-  &:focus {
+  &:focus-visible {
     outline: $_outline-width solid $_outline-color;
   }
 }
diff --git a/src/implementations/vanilla/components/text-area/_text-area.scss b/src/implementations/vanilla/components/text-area/_text-area.scss
index bc6e9e827f9..8e545836877 100644
--- a/src/implementations/vanilla/components/text-area/_text-area.scss
+++ b/src/implementations/vanilla/components/text-area/_text-area.scss
@@ -48,7 +48,7 @@ $_padding-horizontal: null !default;
     box-shadow: $_shadow-hover;
   }
 
-  &:focus,
+  &:focus-visible,
   &:active {
     border-color: $_border-color-focus;
     border-width: $_border-width-focus;
@@ -114,7 +114,7 @@ $_padding-horizontal: null !default;
   }
 
   &:active,
-  &:focus {
+  &:focus-visible {
     border-color: $_border-color-focus;
   }
 }
diff --git a/src/implementations/vanilla/components/text-input/_text-input.scss b/src/implementations/vanilla/components/text-input/_text-input.scss
index c009d9563ed..f1a40da8d7a 100644
--- a/src/implementations/vanilla/components/text-input/_text-input.scss
+++ b/src/implementations/vanilla/components/text-input/_text-input.scss
@@ -48,7 +48,7 @@ $_padding-horizontal: null !default;
     box-shadow: $_shadow-hover;
   }
 
-  &:focus,
+  &:focus-visible,
   &:active {
     border-color: $_border-color-focus;
     border-width: $_border-width-focus;
@@ -108,7 +108,7 @@ $_padding-horizontal: null !default;
     box-shadow: $_shadow;
   }
 
-  &:focus,
+  &:focus-visible,
   &:active {
     border-color: rgba($_border-color, 0.5);
     border-width: $_border-width;