feat(material/stepper): allow focus origin to be optional input in focus method (#20914)

Co-authored-by: Jessica Xu <[email protected]>

Author: Jessica Xu

src/material/stepper/step-header.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor} from '@angular/cdk/a11y';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -99,8 +99,12 @@ export class MatStepHeader extends _MatStepHeaderMixinBase implements AfterViewI
   }
 
   /** Focuses the step header. */
-  focus() {
-    this._focusMonitor.focusVia(this._elementRef, 'program');
+  focus(origin?: FocusOrigin, options?: FocusOptions) {
+    if (origin) {
+      this._focusMonitor.focusVia(this._elementRef, origin, options);
+    } else {
+      this._elementRef.nativeElement.focus(options);
+    }
   }
 
   /** Returns string label of given step if it is a text label. */

src/material/stepper/stepper.spec.ts

@@ -881,6 +881,19 @@ describe('MatStepper', () => {
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
 
+    it('should be able to disable ripples', () => {
+      const fixture = createComponent(SimpleMatVerticalStepperApp);
+      fixture.detectChanges();
+
+      const stepHeaders = fixture.debugElement.queryAll(By.directive(MatStepHeader));
+
+      stepHeaders[0].componentInstance.focus('mouse');
+      stepHeaders[1].componentInstance.focus();
+
+      expect(stepHeaders[1].nativeElement.classList).toContain('cdk-focused');
+      expect(stepHeaders[1].nativeElement.classList).toContain('cdk-mouse-focused');
+    });
+
     it('should be able to set the theme for all steps', () => {
       const fixture = createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();

tools/public_api_guard/material/stepper.d.ts

@@ -44,7 +44,7 @@ export declare class MatStepHeader extends _MatStepHeaderMixinBase implements Af
     _getIconContext(): MatStepperIconContext;
     _stringLabel(): string | null;
     _templateLabel(): MatStepLabel | null;
-    focus(): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatStepHeader, "mat-step-header", never, { "color": "color"; "state": "state"; "label": "label"; "errorMessage": "errorMessage"; "iconOverrides": "iconOverrides"; "index": "index"; "selected": "selected"; "active": "active"; "optional": "optional"; "disableRipple": "disableRipple"; }, {}, never, never>;