fix(stepper): Fix visual flake in focusing stepper header (#15870)

When the step is changed through a button click sometimes the focus of the new
step header is attributed by focus monitor to 'mouse' instead of 'program'. This
results in a visual difference in the step header (focus background is missing).
Instead, when focusing the step header focus it via 'program' explicitly through
the focus monitor.

Author: mitchellwills

src/material/stepper/step-header.ts

@@ -81,6 +81,11 @@ export class MatStepHeader extends CdkStepHeader implements OnDestroy {
     this._focusMonitor.stopMonitoring(this._elementRef);
   }
 
+  /** Focuses the step header. */
+  focus() {
+    this._focusMonitor.focusVia(this._elementRef, 'program');
+  }
+
   /** Returns string label of given step if it is a text label. */
   _stringLabel(): string | null {
     return this.label instanceof MatStepLabel ? null : this.label;

tools/public_api_guard/material/stepper.d.ts

@@ -35,6 +35,7 @@ export declare class MatStepHeader extends CdkStepHeader implements OnDestroy {
     _getIconContext(): MatStepperIconContext;
     _stringLabel(): string | null;
     _templateLabel(): MatStepLabel | null;
+    focus(): void;
     ngOnDestroy(): void;
 }