fix(button): focus method does not respect specified origin (#17183)

It looks like `MatButton` at some point has been refactored
to implement the `FocusableOption` interface so that it can
be used easily in the `FocusKeyManager`.

Currently since the `origin` parameter in the `focus` method
is not respected, the `FocusKeyManager#setFocusOrigin` method
is a noop for button elements. Additionally consumers of
`MatButton` who pass in a specific `FocusOrigin` when calling
the `focus` method will be surprised that the `origin` is simply
ignored (even though it's part of the public method signature; just
prefixed with an underscore).

We should just respect the focus origin to make the method
less confusing and to properly implement the `FocusableOption`.

Fixes #17174

Author: devversion

src/material/button/button.spec.ts

@@ -70,6 +70,19 @@ describe('MatButton', () => {
     expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
   });
 
+  it('should be able to focus button with a specific focus origin', () => {
+    const fixture = TestBed.createComponent(TestApp);
+    const buttonDebugEl = fixture.debugElement.query(By.css('button'));
+    const buttonInstance = buttonDebugEl.componentInstance as MatButton;
+
+    expect(buttonDebugEl.nativeElement.classList).not.toContain('cdk-focused');
+
+    buttonInstance.focus('touch');
+
+    expect(buttonDebugEl.nativeElement.classList).toContain('cdk-focused');
+    expect(buttonDebugEl.nativeElement.classList).toContain('cdk-touch-focused');
+  });
+
   describe('button[mat-fab]', () => {
     it('should have accent palette by default', () => {
       const fixture = TestBed.createComponent(TestApp);

src/material/button/button.ts

@@ -119,10 +119,8 @@ export class MatButton extends _MatButtonMixinBase
   }
 
   /** Focuses the button. */
-  focus(_origin?: FocusOrigin, options?: FocusOptions): void {
-    // Note that we aren't using `_origin`, but we need to keep it because some internal consumers
-    // use `MatButton` in a `FocusKeyManager` and we need it to match `FocusableOption`.
-    this._getHostElement().focus(options);
+  focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {
+    this._focusMonitor.focusVia(this._getHostElement(), origin, options);
   }
 
   _getHostElement() {

tools/public_api_guard/material/button.d.ts

@@ -13,7 +13,7 @@ export declare class MatButton extends _MatButtonMixinBase implements OnDestroy,
     _getHostElement(): any;
     _hasHostAttributes(...attributes: string[]): boolean;
     _isRippleDisabled(): boolean;
-    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
     ngOnDestroy(): void;
 }