fix(multiple): use focus-visible for focus indicator (#32514)

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

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) {

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: '';
 }

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: '';
 }
 

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: '';
     }
   }

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: '';
 }
 

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: '';
   }
 }

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: '';
   }