fix(multiple): consolidate strong focus indicators (#29623)

We currently ship two strong focus indicator variants. This is a leftover from when we had two sets of components. These changes combine them into one and under the `mat-` prefix.

src/material/_index.scss

@@ -38,8 +38,8 @@
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
-@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators;
-@forward './core/focus-indicators/private' as private-strong-focus-indicators-*;
+@forward './core/focus-indicators/private' show strong-focus-indicators,
+  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
@@ -61,8 +61,6 @@
   pseudo-checkbox-base, pseudo-checkbox-overrides;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
-@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
-  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
   autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
   autocomplete-overrides;

src/material/button/_button-base.scss

@@ -48,11 +48,11 @@
   }
 
   // The focus indicator should match the bounds of the entire button.
-  .mat-mdc-focus-indicator {
+  .mat-focus-indicator {
     @include layout-common.fill();
   }
 
-  &:focus .mat-mdc-focus-indicator::before {
+  &:focus .mat-focus-indicator::before {
     content: '';
   }
 }

src/material/button/button.html

@@ -15,6 +15,6 @@
   The indicator can't be directly on the button, because MDC uses ::before for high contrast
   indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
 -->
-<span class="mat-mdc-focus-indicator"></span>
+<span class="mat-focus-indicator"></span>
 
 <span class="mat-mdc-button-touch-target"></span>

src/material/button/button.scss

@@ -315,17 +315,17 @@
 // the focus indicator is sufficiently contrastive and renders appropriately.
 .mat-mdc-unelevated-button,
 .mat-mdc-raised-button {
-  .mat-mdc-focus-indicator::before {
+  .mat-focus-indicator::before {
     $default-border-width: focus-indicators-private.$default-border-width;
-    $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
+    $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
     $offset: calc(#{$border-width} + 2px);
     margin: calc(#{$offset} * -1);
   }
 }
 
-.mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
+.mat-mdc-outlined-button .mat-focus-indicator::before {
   $default-border-width: focus-indicators-private.$default-border-width;
-  $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
+  $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
   $offset: calc(#{$border-width} + 3px);
   margin: calc(#{$offset} * -1);
 }

src/material/button/button.spec.ts

@@ -285,7 +285,7 @@ describe('MatButton', () => {
     ];
 
     expect(
-      buttonNativeElements.every(element => !!element.querySelector('.mat-mdc-focus-indicator')),
+      buttonNativeElements.every(element => !!element.querySelector('.mat-focus-indicator')),
     ).toBe(true);
   });
 

src/material/button/fab.scss

@@ -81,9 +81,9 @@
     will-change: transform;
   }
 
-  .mat-mdc-focus-indicator::before {
+  .mat-focus-indicator::before {
     $default-border-width: focus-indicators-private.$default-border-width;
-    $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
+    $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
     $offset: calc(#{$border-width} + 2px);
     margin: calc(#{$offset} * -1);
   }

src/material/button/icon-button.html

@@ -6,6 +6,6 @@
   The indicator can't be directly on the button, because MDC uses ::before for high contrast
   indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
 -->
-<span class="mat-mdc-focus-indicator"></span>
+<span class="mat-focus-indicator"></span>
 
 <span class="mat-mdc-button-touch-target"></span>

src/material/checkbox/checkbox.html

@@ -34,7 +34,7 @@
       </svg>
       <div class="mdc-checkbox__mixedmark"></div>
     </div>
-    <div class="mat-mdc-checkbox-ripple mat-mdc-focus-indicator" mat-ripple
+    <div class="mat-mdc-checkbox-ripple mat-focus-indicator" mat-ripple
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
       [matRippleCentered]="true"></div>

src/material/checkbox/checkbox.scss

@@ -114,6 +114,6 @@
 
 // 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-mdc-focus-indicator::before {
+.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before {
   content: '';
 }

src/material/checkbox/checkbox.spec.ts

@@ -674,7 +674,7 @@ describe('MatCheckbox', () => {
         '.mat-mdc-checkbox-ripple',
       )!;
 
-      expect(checkboxRippleNativeElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
+      expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
     });
   });
 

src/material/chips/chip-icons.ts

@@ -64,7 +64,7 @@ export class MatChipTrailingIcon extends MatChipAction {
   selector: '[matChipRemove]',
   host: {
     'class':
-      'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
+      'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-focus-indicator ' +
       'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
     'role': 'button',
     '[attr.aria-hidden]': 'null',

src/material/chips/chip-option.html

@@ -25,7 +25,7 @@
     }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
-      <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
+      <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
   </button>
 </span>

src/material/chips/chip-option.spec.ts

@@ -401,7 +401,7 @@ describe('Option Chips', () => {
 
     it('should contain a focus indicator inside the text label', () => {
       const label = chipNativeElement.querySelector('.mdc-evolution-chip__text-label');
-      expect(label?.querySelector('.mat-mdc-focus-indicator')).toBeTruthy();
+      expect(label?.querySelector('.mat-focus-indicator')).toBeTruthy();
     });
   });
 });

src/material/chips/chip-remove.spec.ts

@@ -90,7 +90,7 @@ describe('Chip Remove', () => {
 
     it('should have a focus indicator', fakeAsync(() => {
       const buttonElement = chipNativeElement.querySelector('.mdc-evolution-chip__icon--trailing')!;
-      expect(buttonElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
+      expect(buttonElement.classList.contains('mat-focus-indicator')).toBe(true);
     }));
 
     it('should prevent the default click action', fakeAsync(() => {

src/material/chips/chip-row.html

@@ -24,7 +24,7 @@
       <ng-content></ng-content>
     }
 
-    <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator" aria-hidden="true"></span>
+    <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator" aria-hidden="true"></span>
   </span>
 </span>
 

src/material/chips/chip.html

@@ -9,7 +9,7 @@
     }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
-      <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
+      <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
   </span>
 </span>

src/material/chips/chip.scss

@@ -670,9 +670,9 @@ $_avatar-trailing-padding: 8px;
 
   // For the chip element, default inset/offset values are necessary to ensure that
   // the focus indicator is sufficiently contrastive and renders appropriately.
-  .mat-mdc-focus-indicator::before {
+  .mat-focus-indicator::before {
     $default-border-width: focus-indicators-private.$default-border-width;
-    $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
+    $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
     $offset: calc(#{$border-width} + 2px);
     margin: calc(#{$offset} * -1);
   }
@@ -681,7 +681,7 @@ $_avatar-trailing-padding: 8px;
 .mat-mdc-chip-remove {
   &::before {
     $default-border-width: focus-indicators-private.$default-border-width;
-    $offset: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
+    $offset: var(--mat-focus-indicator-border-width, #{$default-border-width});
     margin: calc(#{$offset} * -1);
 
     // MDC sets a padding a on the chip button which stretches out the focus indicator.
@@ -728,6 +728,6 @@ $_avatar-trailing-padding: 8px;
 
 // 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-mdc-focus-indicator::before {
+.mat-mdc-chip-action:focus .mat-focus-indicator::before {
   content: '';
 }

src/material/core/_core.scss

@@ -15,8 +15,7 @@
   }
 
   @include cdk.a11y-visually-hidden();
-  @include private.structural-styling('mat');
-  @include private.structural-styling('mat-mdc');
+  @include private.structural-styling();
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.

src/material/core/focus-indicators/_private.scss

@@ -12,31 +12,19 @@ $default-border-color: transparent;
 $default-border-radius: 4px;
 
 // Mixin that renders the focus indicator structural styles.
-@mixin structural-styling($prefix) {
-  .#{$prefix}-focus-indicator {
+@mixin structural-styling() {
+  .mat-focus-indicator {
     position: relative;
 
     &::before {
       @include layout-common.fill();
       box-sizing: border-box;
       pointer-events: none;
-      display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.
-      border: var(
-          --#{$prefix}-focus-indicator-border-width,
-          #{$default-border-width}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-style,
-          #{$default-border-style}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-color,
-          #{$default-border-color}
-        );
-      border-radius: var(
-        --#{$prefix}-focus-indicator-border-radius,
-        #{$default-border-radius}
-      );
+      display: var(--mat-focus-indicator-display, none); // Hide the indicator by default.
+      border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
+      border-style: var(--mat-focus-indicator-border-style, #{$default-border-style});
+      border-color: var(--mat-focus-indicator-border-color, #{$default-border-color});
+      border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius});
     }
 
     // By default, render the focus indicator when the focus indicator host element takes focus.
@@ -48,7 +36,7 @@ $default-border-radius: 4px;
 
   // Enable the indicator in high contrast mode.
   @include cdk.high-contrast(active, off) {
-    @include customize-focus-indicators((display: block), $prefix);
+    @include _customize-focus-indicators((display: block));
   }
 }
 
@@ -62,18 +50,18 @@ $default-border-radius: 4px;
 }
 
 // Mixin that dedups CSS variables for the strong-focus-indicators mixin.
-@mixin customize-focus-indicators($config, $prefix) {
+@mixin _customize-focus-indicators($config) {
   $border-style: map.get($config, border-style);
   $border-width: map.get($config, border-width);
   $border-radius: map.get($config, border-radius);
   $border-color: map.get($config, border-color);
   $display: map.get($config, display);
   $map: (
-    '#{$prefix}-focus-indicator-border-style': $border-style,
-    '#{$prefix}-focus-indicator-border-width': $border-width,
-    '#{$prefix}-focus-indicator-border-radius': $border-radius,
-    '#{$prefix}-focus-indicator-border-color': $border-color,
-    '#{$prefix}-focus-indicator-display': $display,
+    'mat-focus-indicator-border-style': $border-style,
+    'mat-focus-indicator-border-width': $border-width,
+    'mat-focus-indicator-border-radius': $border-radius,
+    'mat-focus-indicator-border-color': $border-color,
+    'mat-focus-indicator-display': $display,
   );
 
   @if (&) {
@@ -91,48 +79,29 @@ $default-border-radius: 4px;
 @mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
-      border-color: black,
-      display: block,
+    border-color: black,
+    display: block,
   );
 
   // Merge default config with user config.
   $config: map.merge($default-config, $config);
 
-  @include customize-focus-indicators($config, 'mat');
-}
-
-@mixin mdc-strong-focus-indicators($config: ()) {
-  // Default focus indicator config.
-  $default-config: (
-      border-color: black,
-      display: block,
-  );
-
-  // Merge default config with user config.
-  $config: map.merge($default-config, $config);
-
-  @include customize-focus-indicators($config, 'mat-mdc');
+  @include _customize-focus-indicators($config);
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $border-color));
   }
 }
 
 @mixin strong-focus-indicators-theme($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
@@ -142,33 +111,3 @@ $default-border-radius: 4px;
     }
   }
 }
-
-@mixin mdc-strong-focus-indicators-color($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat-mdc');
-  }
-}
-
-@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    @include theming.private-check-duplicate-theme-styles(
-        $theme-or-color, 'mat-mdc-focus-indicators') {
-      @if inspection.theme-has($theme-or-color, color) {
-        @include mdc-strong-focus-indicators-color($theme-or-color);
-      }
-    }
-  }
-}