Skip to content

Commit 1ba04eb

Browse files
crisbetoandrewseguin
authored andcommitted
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.
1 parent d1011e8 commit 1ba04eb

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

src/lib/tabs/_tabs-common.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../core/style/variables';
2+
@import '../../cdk/a11y/a11y';
23

34
$mat-tab-bar-height: 48px !default;
45
$mat-tab-animation-duration: 500ms !default;
@@ -46,13 +47,20 @@ $mat-tab-animation-duration: 500ms !default;
4647

4748
// Mixin styles for the ink bar that displays near the active tab in the header.
4849
@mixin ink-bar {
50+
$height: 2px;
51+
4952
position: absolute;
5053
bottom: 0;
51-
height: 2px;
54+
height: $height;
5255
transition: $mat-tab-animation-duration $ease-in-out-curve-function;
5356

5457
.mat-tab-group-inverted-header & {
5558
bottom: auto;
5659
top: 0;
5760
}
61+
62+
@include cdk-high-contrast {
63+
outline: solid $height;
64+
height: 0;
65+
}
5866
}

0 commit comments

Comments
 (0)