fix(tabs): don't show focus indication for mouse focus (#11194)

Similarly to other components, makes the tabs focus indication not to show for mouse focus.

Fixes #11184.

Author: crisbeto

src/lib/tabs/BUILD.bazel

@@ -21,6 +21,7 @@ ng_module(
     "//src/cdk/observers",
     "//src/cdk/portal",
     "//src/cdk/scrolling",
+    "//src/cdk/a11y",
     "@rxjs",
   ],
   tsconfig = "//src/lib:tsconfig-build.json",

src/lib/tabs/_tabs-theme.scss

@@ -83,9 +83,11 @@
 }
 
 @mixin _mat-tab-label-focus($tab-focus-color) {
-  .mat-tab-label:not(.mat-tab-disabled):focus,
-  .mat-tab-link:not(.mat-tab-disabled):focus {
-    background-color: mat-color($tab-focus-color, lighter, 0.3);
+  .mat-tab-label,
+  .mat-tab-link {
+    &.cdk-focused:not(.cdk-mouse-focused):not(.mat-tab-disabled) {
+      background-color: mat-color($tab-focus-color, lighter, 0.3);
+    }
   }
 }
 

src/lib/tabs/tab-group.html

@@ -3,7 +3,7 @@
                [disableRipple]="disableRipple"
                (indexFocused)="_focusChanged($event)"
                (selectFocusedIndex)="selectedIndex = $event">
-  <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple
+  <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple cdkMonitorElementFocus
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [attr.tabIndex]="_getTabIndex(tab, i)"

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -46,6 +46,7 @@ import {
 import {merge, of as observableOf, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatInkBar} from '../ink-bar';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 
 // Boilerplate for applying mixins to MatTabNav.
@@ -222,7 +223,12 @@ export class MatTabLink extends _MatTabLinkMixinBase
               ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,
-              @Attribute('tabindex') tabIndex: string) {
+              @Attribute('tabindex') tabIndex: string,
+              /**
+               * @deprecated
+               * @deletion-target 7.0.0 `_focusMonitor` parameter to be made required.
+               */
+              private _focusMonitor?: FocusMonitor) {
     super();
 
     this._tabLinkRipple = new RippleRenderer(this, ngZone, _elementRef, platform);
@@ -239,10 +245,18 @@ export class MatTabLink extends _MatTabLinkMixinBase
         animation: globalOptions.animation,
       };
     }
+
+    if (_focusMonitor) {
+      _focusMonitor.monitor(_elementRef.nativeElement);
+    }
   }
 
   ngOnDestroy() {
     this._tabLinkRipple._removeTriggerEvents();
+
+    if (this._focusMonitor) {
+      this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+    }
   }
 
   /**

src/lib/tabs/tabs-module.ts

@@ -20,6 +20,7 @@ import {MatTabHeader} from './tab-header';
 import {MatTabLabel} from './tab-label';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
+import {A11yModule} from '@angular/cdk/a11y';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
     PortalModule,
     MatRippleModule,
     ObserversModule,
+    A11yModule,
   ],
   // Don't export all components because some are only to be used internally.
   exports: [