fix(tabs): focusChange not being emitted when tabbing into a tab head…

…er (#15094)

Fixes the `focusChange` output not emitting when the user tabs into a tab header which is different from the previously-focused one.

Fixes #14142.

(cherry picked from commit ef18b75)

src/material/tabs/tab-group.html

@@ -17,7 +17,8 @@
        [class.mat-tab-label-active]="selectedIndex == i"
        [disabled]="tab.disabled"
        [matRippleDisabled]="tab.disabled || disableRipple"
-       (click)="_handleClick(tab, tabHeader, i)">
+       (click)="_handleClick(tab, tabHeader, i)"
+       (cdkFocusChange)="_tabFocusChanged($event, i)">
 
 
     <div class="mat-tab-label-content">

src/material/tabs/tab-group.spec.ts

@@ -298,6 +298,25 @@ describe('MatTabGroup', () => {
       expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator')))
         .toBe(true);
     });
+
+    it('should emit focusChange when a tab receives focus', () => {
+      spyOn(fixture.componentInstance, 'handleFocus');
+      fixture.detectChanges();
+
+      const tabLabels = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+
+      expect(fixture.componentInstance.handleFocus).toHaveBeenCalledTimes(0);
+
+      // In order to verify that the `focusChange` event also fires with the correct
+      // index, we focus the second tab before testing the keyboard navigation.
+      dispatchFakeEvent(tabLabels[1].nativeElement, 'focus');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.handleFocus).toHaveBeenCalledTimes(1);
+      expect(fixture.componentInstance.handleFocus)
+        .toHaveBeenCalledWith(jasmine.objectContaining({index: 1}));
+    });
+
   });
 
   describe('aria labelling', () => {

src/material/tabs/tab-group.ts

@@ -31,6 +31,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import {FocusOrigin} from '@angular/cdk/a11y';
 import {
   CanColor,
   CanColorCtor,
@@ -373,6 +374,13 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
     return this.selectedIndex === idx ? 0 : -1;
   }
 
+  /** Callback for when the focused state of a tab has changed. */
+  _tabFocusChanged(focusOrigin: FocusOrigin, index: number) {
+    if (focusOrigin) {
+      this._tabHeader.focusIndex = index;
+    }
+  }
+
   static ngAcceptInputType_dynamicHeight: BooleanInput;
   static ngAcceptInputType_animationDuration: NumberInput;
   static ngAcceptInputType_selectedIndex: NumberInput;

tools/public_api_guard/material/tabs.d.ts

@@ -58,6 +58,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;
     _removeTabBodyWrapperHeight(): void;
     _setTabBodyWrapperHeight(tabHeight: number): void;
+    _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void;
     ngAfterContentChecked(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;