From 6ad52afb7224a74c1a19fabf470be0c3deba3dd1 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 12 Jan 2020 16:47:47 +0100 Subject: [PATCH] fix(tabs): better high contrast indication on supported browsers We add an outline for focus indication in high contrast mode for tabs, but part of it gets clipped, because of `overflow: hidden`. These changes add a negative offset to ensure that it doesn't clip. Note that this isn't supported on IE, but it's a progressive enhncement for Edge and Firefox. --- src/material/tabs/_tabs-common.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index 8a5067d1adc5..c9df4470e223 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -28,7 +28,9 @@ $mat-tab-animation-duration: 500ms !default; } @include cdk-high-contrast { - outline: dotted 2px; + $outline-width: 2px; + outline: dotted $outline-width; + outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else. } }