diff --git a/packages/bottom-navigation/_mixins.scss b/packages/bottom-navigation/_mixins.scss
index b48e4f1..32f84b2 100644
--- a/packages/bottom-navigation/_mixins.scss
+++ b/packages/bottom-navigation/_mixins.scss
@@ -125,7 +125,7 @@
       );
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     background-color:
       functions.get-action-background-color(
diff --git a/packages/button/_mixins.scss b/packages/button/_mixins.scss
index 1d160f6..ad1cc2d 100644
--- a/packages/button/_mixins.scss
+++ b/packages/button/_mixins.scss
@@ -335,7 +335,7 @@
     );
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -appearance-style(
       $appearance: $appearance,
diff --git a/packages/checkbox/_mixins.scss b/packages/checkbox/_mixins.scss
index 746f9d9..71f55ef 100644
--- a/packages/checkbox/_mixins.scss
+++ b/packages/checkbox/_mixins.scss
@@ -15,7 +15,7 @@
     @include -ruleset($states: (hover));
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -ruleset($states: (focused));
   }
@@ -34,9 +34,9 @@
     @include -ruleset($states: (disabled));
   }
 
-  &:checked:focus,
+  &:checked:focus-visible,
   &:checked.--focused,
-  &.--selected:focus,
+  &.--selected:focus-visible,
   &.--selected.--focused {
     @include -ruleset($states: (selected, focused));
   }
diff --git a/packages/interactive-list/_mixins.scss b/packages/interactive-list/_mixins.scss
index 2bc155d..aa7ee78 100644
--- a/packages/interactive-list/_mixins.scss
+++ b/packages/interactive-list/_mixins.scss
@@ -43,7 +43,7 @@
     & > a,
     & > button,
     & > label {
-      &:focus,
+      &:focus-visible,
       &.--focused {
         background-color:
           adapter-functions.get-background-overlay-color(
@@ -160,7 +160,7 @@
           $state: selected
         );
 
-      &:focus,
+      &:focus-visible,
       &:hover {
         background-color:
           adapter-functions.get-background-overlay-color(
@@ -178,7 +178,7 @@
           $state: activated
         );
 
-      &:focus,
+      &:focus-visible,
       &:hover {
         background-color:
           adapter-functions.get-background-overlay-color(
diff --git a/packages/radio/_mixins.scss b/packages/radio/_mixins.scss
index 8af2bdc..0ef22b3 100644
--- a/packages/radio/_mixins.scss
+++ b/packages/radio/_mixins.scss
@@ -15,7 +15,7 @@
     @include -ruleset($states: (hover));
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -ruleset($states: (focused));
   }
@@ -30,9 +30,9 @@
     @include -ruleset($states: (disabled));
   }
 
-  &:checked:focus,
+  &:checked:focus-visible,
   &:checked.--focused,
-  &.--selected:focus,
+  &.--selected:focus-visible,
   &.--selected.--focused {
     @include -ruleset($states: (selected, focused));
   }
diff --git a/packages/select/_mixins.scss b/packages/select/_mixins.scss
index b8ec0f0..775e86c 100644
--- a/packages/select/_mixins.scss
+++ b/packages/select/_mixins.scss
@@ -109,7 +109,7 @@
 }
 
 @mixin -focus-rule {
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @content;
   }
diff --git a/packages/textfield/_mixins.scss b/packages/textfield/_mixins.scss
index 0ccc04f..28a4b0b 100644
--- a/packages/textfield/_mixins.scss
+++ b/packages/textfield/_mixins.scss
@@ -122,7 +122,7 @@
 }
 
 @mixin -focus-rule {
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @content;
   }