refactor(focus-monitor): accept ElementRef in focusVia (#12978)

Looks like something that was missed in #12712. For consistency with `monitor` and `stopMonitoring`, accepts an `ElementRef` in `focusVia`.

Author: crisbeto

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -173,13 +173,28 @@ export class FocusMonitor implements OnDestroy {
    * @param origin Focus origin.
    * @param options Options that can be used to configure the focus behavior.
    */
-  focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void {
+  focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void;
+
+  /**
+   * Focuses the element via the specified focus origin.
+   * @param element Element to focus.
+   * @param origin Focus origin.
+   * @param options Options that can be used to configure the focus behavior.
+   */
+  focusVia(element: ElementRef<HTMLElement>, origin: FocusOrigin, options?: FocusOptions): void;
+
+  focusVia(element: HTMLElement | ElementRef<HTMLElement>,
+          origin: FocusOrigin,
+          options?: FocusOptions): void {
+
+    const nativeElement = this._getNativeElement(element);
+
     this._setOriginForCurrentEventQueue(origin);
 
     // `focus` isn't available on the server
-    if (typeof element.focus === 'function') {
+    if (typeof nativeElement.focus === 'function') {
       // Cast the element to `any`, because the TS typings don't have the `options` parameter yet.
-      (element as any).focus(options);
+      (nativeElement as any).focus(options);
     }
   }
 

src/lib/checkbox/checkbox.ts

@@ -410,7 +410,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
   /** Focuses the checkbox. */
   focus(): void {
-    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement, 'keyboard');
   }
 
   _onInteractionEvent(event: Event) {

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

@@ -86,7 +86,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     // Avoids focus being lost if the panel contained the focused element and was closed.
     panel.closed
       .pipe(filter(() => panel._containsFocus()))
-      .subscribe(() => _focusMonitor.focusVia(_element.nativeElement, 'program'));
+      .subscribe(() => _focusMonitor.focusVia(_element, 'program'));
 
     _focusMonitor.monitor(_element).subscribe(origin => {
       if (origin && panel.accordion) {
@@ -158,7 +158,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
    * @docs-private
    */
   focus(origin: FocusOrigin = 'program') {
-    this._focusMonitor.focusVia(this._element.nativeElement, origin);
+    this._focusMonitor.focusVia(this._element, origin);
   }
 
   ngOnDestroy() {

src/lib/menu/menu-trigger.ts

@@ -224,7 +224,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
    */
   focus(origin: FocusOrigin = 'program') {
     if (this._focusMonitor) {
-      this._focusMonitor.focusVia(this._element.nativeElement, origin);
+      this._focusMonitor.focusVia(this._element, origin);
     } else {
       this._element.nativeElement.focus();
     }

src/lib/radio/radio.ts

@@ -491,7 +491,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
 
   /** Focuses the radio button. */
   focus(): void {
-    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement, 'keyboard');
   }
 
   /**

src/lib/slide-toggle/slide-toggle.ts

@@ -279,7 +279,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
 
   /** Focuses the slide-toggle. */
   focus(): void {
-    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement, 'keyboard');
   }
 
   /** Toggles the checked state of the slide-toggle. */

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -84,7 +84,7 @@ export class KitchenSink {
     focusMonitor: FocusMonitor,
     elementRef: ElementRef<HTMLElement>,
     bottomSheet: MatBottomSheet) {
-    focusMonitor.focusVia(elementRef.nativeElement, 'program');
+    focusMonitor.focusVia(elementRef, 'program');
     snackBar.open('Hello there');
     dialog.open(TestEntryComponent);
     bottomSheet.open(TestEntryComponent);