fix(material-experimental/mdc-button): strong focus indication always visible on fab buttons (#19169)

Our generic strong focus indication uses `::before` which is also used by MDC's FAB to draw a transparent border for high contrast mode. The result is that our indication is always visible and not positioned properly. These changes move the indicator into an inner element whose `::before` isn't styled by MDC.

Author: crisbeto

src/material-experimental/mdc-button/button-base.ts

@@ -38,7 +38,6 @@ export const MAT_BUTTON_HOST = {
   // Add a class that applies to all buttons. This makes it easier to target if somebody
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',
-  'class': 'mat-mdc-focus-indicator',
 };
 
 /** Configuration for the ripple animation. */
@@ -154,7 +153,6 @@ export const MAT_ANCHOR_HOST = {
   // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
   // select and style this "theme".
   '[class.mat-unthemed]': '!color',
-  'class': 'mat-mdc-focus-indicator',
   // Add a class that applies to all buttons. This makes it easier to target if somebody
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',

src/material-experimental/mdc-button/button.html

@@ -5,6 +5,12 @@
 
 <span class="mdc-button__label"><ng-content></ng-content></span>
 
+<!--
+  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.
+-->
+<div class="mat-mdc-focus-indicator"></div>
+
 <ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
 </ng-content>
 

src/material-experimental/mdc-button/button.spec.ts

@@ -264,7 +264,7 @@ describe('MDC-based MatButton', () => {
         [...fixture.debugElement.nativeElement.querySelectorAll('a, button')];
 
     expect(buttonNativeElements
-        .every(element => element.classList.contains('mat-mdc-focus-indicator'))).toBe(true);
+        .every(element => !!element.querySelector('.mat-mdc-focus-indicator'))).toBe(true);
   });
 });
 

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -235,10 +235,8 @@ $mat-typography-level-mappings: (
   // values are necessary to ensure that the focus indicator is sufficiently
   // contrastive and renders appropriately.
 
-  .mat-mdc-focus-indicator.mdc-button::before,
-  .mat-mdc-focus-indicator.mdc-chip::before,
-  .mat-mdc-focus-indicator.mdc-fab::before,
-  .mat-mdc-focus-indicator.mdc-icon-button::before {
+  .mat-mdc-button-base .mat-mdc-focus-indicator::before,
+  .mat-mdc-focus-indicator.mdc-chip::before {
     margin: $mat-focus-indicator-border-width * -2;
   }
 
@@ -260,6 +258,7 @@ $mat-typography-level-mappings: (
   .mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
   .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
   .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
+  .mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
 
   // For all other components, render the focus indicator on focus.
   .mat-mdc-focus-indicator:focus::before {