refactor: allow options to be passed to focus methods (#14184)

Updates the `focus` methods on the different components to allow for the `FocusOptions` to be passed in.

Fixes #14182.

Author: crisbeto

src/material/button-toggle/button-toggle.ts

@@ -523,8 +523,8 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
   }
 
   /** Focuses the button. */
-  focus(): void {
-    this._buttonElement.nativeElement.focus();
+  focus(options?: FocusOptions): void {
+    this._buttonElement.nativeElement.focus(options);
   }
 
   /** Checks the button toggle due to an interaction with the underlying native button. */

src/material/button/button.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor} from '@angular/cdk/a11y';
+import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -78,7 +78,7 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatButton extends _MatButtonMixinBase
-    implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
+    implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
 
   /** Whether the button is round. */
   readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab');
@@ -114,8 +114,10 @@ export class MatButton extends _MatButtonMixinBase
   }
 
   /** Focuses the button. */
-  focus(): void {
-    this._getHostElement().focus();
+  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);
   }
 
   _getHostElement() {

src/material/checkbox/checkbox.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor} from '@angular/cdk/a11y';
+import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   Attribute,
@@ -127,7 +127,8 @@ const _MatCheckboxMixinBase:
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
-    AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
+    AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
+    FocusableOption {
 
   /**
    * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will
@@ -401,8 +402,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   }
 
   /** Focuses the checkbox. */
-  focus(): void {
-    this._focusMonitor.focusVia(this._inputElement, 'keyboard');
+  focus(origin: FocusOrigin = 'keyboard', options?: FocusOptions): void {
+    this._focusMonitor.focusVia(this._inputElement, origin, options);
   }
 
   _onInteractionEvent(event: Event) {

src/material/chips/chip-input.ts

@@ -156,8 +156,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
   }
 
   /** Focuses the input. */
-  focus(): void {
-    this._inputElement.focus();
+  focus(options?: FocusOptions): void {
+    this._inputElement.focus(options);
   }
 
   /** Checks whether a keycode is one of the configured separators. */

src/material/chips/chip-list.ts

@@ -460,7 +460,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
    * Focuses the first non-disabled chip in this chip list, or the associated input when there
    * are no eligible chips.
    */
-  focus(): void {
+  focus(options?: FocusOptions): void {
     if (this.disabled) {
       return;
     }
@@ -473,15 +473,15 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
       this._keyManager.setFirstItemActive();
       this.stateChanges.next();
     } else {
-      this._focusInput();
+      this._focusInput(options);
       this.stateChanges.next();
     }
   }
 
   /** Attempt to focus an input if we have one. */
-  _focusInput() {
+  _focusInput(options?: FocusOptions) {
     if (this._chipInput) {
-      this._chipInput.focus();
+      this._chipInput.focus(options);
     }
   }
 

src/material/chips/chip-text-control.ts

@@ -22,5 +22,5 @@ export interface MatChipTextControl {
   empty: boolean;
 
   /** Focuses the text control. */
-  focus(): void;
+  focus(options?: FocusOptions): void;
 }

src/material/core/option/option.ts

@@ -24,6 +24,7 @@ import {
   QueryList,
   ViewEncapsulation,
 } from '@angular/core';
+import {FocusOptions, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
 import {MatOptgroup} from './optgroup';
 
@@ -84,7 +85,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatOption implements AfterViewChecked, OnDestroy {
+export class MatOption implements FocusableOption, AfterViewChecked, OnDestroy {
   private _selected = false;
   private _active = false;
   private _disabled = false;
@@ -161,11 +162,13 @@ export class MatOption implements AfterViewChecked, OnDestroy {
   }
 
   /** Sets focus onto this option. */
-  focus(): void {
+  focus(_origin?: FocusOrigin, options?: FocusOptions): void {
+    // Note that we aren't using `_origin`, but we need to keep it because some internal consumers
+    // use `MatOption` in a `FocusKeyManager` and we need it to match `FocusableOption`.
     const element = this._getHostElement();
 
     if (typeof element.focus === 'function') {
-      element.focus();
+      element.focus(options);
     }
   }
 

src/material/expansion/expansion-panel-header.ts

@@ -203,8 +203,8 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
    * @param origin Origin of the action that triggered the focus.
    * @docs-private
    */
-  focus(origin: FocusOrigin = 'program') {
-    this._focusMonitor.focusVia(this._element, origin);
+  focus(origin: FocusOrigin = 'program', options?: FocusOptions) {
+    this._focusMonitor.focusVia(this._element, origin, options);
   }
 
   ngOnDestroy() {

src/material/input/input.ts

@@ -310,8 +310,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   }
 
   /** Focuses the input. */
-  focus(): void {
-    this._elementRef.nativeElement.focus();
+  focus(options?: FocusOptions): void {
+    this._elementRef.nativeElement.focus(options);
   }
 
   /** Callback for the cases where the focused state of the input changes. */

src/material/list/selection-list.ts

@@ -320,8 +320,8 @@ export class MatListOption extends _MatListOptionMixinBase
   providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption,
-    CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
+export class MatSelectionList extends _MatSelectionListMixinBase implements CanDisableRipple,
+  AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
 
   /** The FocusKeyManager which handles focus. */
   _keyManager: FocusKeyManager<MatListOption>;
@@ -429,8 +429,8 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   }
 
   /** Focuses the selection list. */
-  focus() {
-    this._element.nativeElement.focus();
+  focus(options?: FocusOptions) {
+    this._element.nativeElement.focus(options);
   }
 
   /** Selects all of the options. */