diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index 644e8b4af773..d4c21b6d58c4 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -56,7 +56,7 @@
     }
   }
 
-  &:focus > .mat-focus-indicator::before {
+  &:focus-visible > .mat-focus-indicator::before {
     content: '';
 
     @if ($focus-indicator-inherits-shape) {
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 651656e8fb56..c07c0b111e55 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -105,6 +105,6 @@ $fallbacks: m3-checkbox.get-tokens();
 
 // For checkboxes render the focus indicator when we know
 // the hidden input is focused (slightly different for each control).
-.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before {
+.mdc-checkbox__native-control:focus-visible ~ .mat-focus-indicator::before {
   content: '';
 }
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index bbe6517b37cf..f780d673ded6 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -737,7 +737,7 @@ $fallbacks: m3-chip.get-tokens();
 
 // The chip has multiple focus targets so we have to put the indicator on
 // a separate element, rather than on the focusable element itself.
-.mat-mdc-chip-action:focus .mat-focus-indicator::before {
+.mat-mdc-chip-action:focus-visible .mat-focus-indicator::before {
   content: '';
 }
 
diff --git a/src/material/core/focus-indicators/_private.scss b/src/material/core/focus-indicators/_private.scss
index 7cee4592e5ab..b41b7f595e18 100644
--- a/src/material/core/focus-indicators/_private.scss
+++ b/src/material/core/focus-indicators/_private.scss
@@ -28,7 +28,7 @@ $default-border-radius: 4px;
 
     // By default, render the focus indicator when the focus indicator host element takes focus.
     // Defining a pseudo element's content will cause it to render.
-    &:focus::before {
+    &:focus-visible::before {
       content: '';
     }
   }
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index 5ec4a394531a..15510913ee1e 100644
--- a/src/material/datepicker/calendar.scss
+++ b/src/material/datepicker/calendar.scss
@@ -132,7 +132,7 @@ $fallbacks: m3-datepicker.get-tokens();
 
 // For calendar cells, render the focus indicator when the parent cell is
 // focused.
-.mat-calendar-body-cell:focus .mat-focus-indicator::before {
+.mat-calendar-body-cell:focus-visible .mat-focus-indicator::before {
   content: '';
 }
 
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 3f78705aaca2..8d1802e2b23c 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -131,7 +131,7 @@ a.mdc-list-item--activated {
 
   // For list items, render the focus indicator when the parent
   // listem item is focused.
-  &:focus > .mat-focus-indicator::before {
+  &:focus-visible > .mat-focus-indicator::before {
     content: '';
   }
 }
diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
index 346e8ea3f09a..9ea7bf14836d 100644
--- a/src/material/stepper/step-header.scss
+++ b/src/material/stepper/step-header.scss
@@ -16,7 +16,7 @@ $fallbacks: m3-stepper.get-tokens();
 
   // Stepper headers have the focus indicator as a descendant,
   // because `::before` is used for other styling.
-  &:focus .mat-focus-indicator::before {
+  &:focus-visible .mat-focus-indicator::before {
     content: '';
   }