fix(material/stepper): strong focus indicator not working for below label position (#22696)

The strong focus indicator renders using a `::before` selector which is also used for styling a stepper header with a `below` label position. This results in broken styles when strong focus indication is enabled.

These changes move the indicator to a different element.

Fixes #22677.

Author: crisbeto

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

@@ -71,6 +71,10 @@
   // focused.
   .mat-calendar-body-cell:focus .mat-focus-indicator::before,
 
+  // Stepper headers have the focus indicator as a descendant,
+  // because `::before` is used for other styling.
+  .mat-step-header:focus .mat-focus-indicator::before,
+
   // For all other components, render the focus indicator on focus.
   .mat-focus-indicator:focus::before {
     content: '';

src/material/stepper/step-header.html

@@ -1,4 +1,4 @@
-<div class="mat-step-header-ripple" matRipple
+<div class="mat-step-header-ripple mat-focus-indicator" matRipple
      [matRippleTrigger]="_getHostElement()"
      [matRippleDisabled]="disableRipple"></div>
 

src/material/stepper/step-header.ts

@@ -43,7 +43,7 @@ const _MatStepHeaderMixinBase: CanColorCtor & typeof MatStepHeaderBase =
   styleUrls: ['step-header.css'],
   inputs: ['color'],
   host: {
-    'class': 'mat-step-header mat-focus-indicator',
+    'class': 'mat-step-header',
     'role': 'tab',
   },
   encapsulation: ViewEncapsulation.None,

src/material/stepper/stepper.spec.ts

@@ -392,7 +392,7 @@ describe('MatStepper', () => {
           [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')];
 
       expect(stepHeaderNativeElements
-          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+          .every(element => element.querySelector('.mat-focus-indicator'))).toBe(true);
     });
 
   });