From d7b7630fdee55e24f16f66834006d8f659e2bb84 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 6 May 2018 22:23:41 +0200
Subject: [PATCH] fix(tabs): don't show focus indication for mouse focus

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

Fixes #11184.
---
 src/lib/tabs/BUILD.bazel                |  1 +
 src/lib/tabs/_tabs-theme.scss           |  8 +++++---
 src/lib/tabs/tab-group.html             |  2 +-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 16 +++++++++++++++-
 src/lib/tabs/tabs-module.ts             |  2 ++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/lib/tabs/BUILD.bazel b/src/lib/tabs/BUILD.bazel
index 126494324b8f..bf16124ebf19 100644
--- a/src/lib/tabs/BUILD.bazel
+++ b/src/lib/tabs/BUILD.bazel
@@ -20,6 +20,7 @@ ng_module(
     "//src/cdk/observers",
     "//src/cdk/portal",
     "//src/cdk/scrolling",
+    "//src/cdk/a11y",
     "@rxjs",
   ],
   tsconfig = "//src/lib:tsconfig-build.json",
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
index 1c2a0d65aeb9..7b8648a02b91 100644
--- a/src/lib/tabs/_tabs-theme.scss
+++ b/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);
+    }
   }
 }
 
diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 9a9148f89061..e572c7029a04 100644
--- a/src/lib/tabs/tab-group.html
+++ b/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)"
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index 4b2f80116534..a7f64fffd052 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -45,6 +45,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.
@@ -216,7 +217,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);
@@ -231,10 +237,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);
+    }
   }
 
   /**
diff --git a/src/lib/tabs/tabs-module.ts b/src/lib/tabs/tabs-module.ts
index cdd774f9b125..e90b7fba63a0 100644
--- a/src/lib/tabs/tabs-module.ts
+++ b/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: [