From 1ba04ebc67c7b80f3047dd160ed314cb7ffb75f1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sun, 18 Feb 2018 01:42:21 +0100
Subject: [PATCH] fix(tabs): ink bar not visible in high contrast mode (#9997)

Adds a fallback that makes the ink bar visible in high contrast mode, allowing users to see which tab is selected.
---
 src/lib/tabs/_tabs-common.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss
index 0e9e5b2e754b..cacfab6f2cd7 100644
--- a/src/lib/tabs/_tabs-common.scss
+++ b/src/lib/tabs/_tabs-common.scss
@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../../cdk/a11y/a11y';
 
 $mat-tab-bar-height: 48px !default;
 $mat-tab-animation-duration: 500ms !default;
@@ -46,13 +47,20 @@ $mat-tab-animation-duration: 500ms !default;
 
 // Mixin styles for the ink bar that displays near the active tab in the header.
 @mixin ink-bar {
+  $height: 2px;
+
   position: absolute;
   bottom: 0;
-  height: 2px;
+  height: $height;
   transition: $mat-tab-animation-duration $ease-in-out-curve-function;
 
   .mat-tab-group-inverted-header & {
     bottom: auto;
     top: 0;
   }
+
+  @include cdk-high-contrast {
+    outline: solid $height;
+    height: 0;
+  }
 }