Skip to content

Commit 16f2a60

Browse files
authored
fix(material/tabs): strong focus indicator not visible when tab header has a background (#21402)
`mat-tab-group` has the ability to theme both the foreground and background. When the background color is different from the default, the strong focus indicator blends into it, making it invisible. These changes invert the color of the indicator so it stands out.
1 parent ae6e930 commit 16f2a60

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

src/material-experimental/mdc-tabs/_tabs-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@
8080
@include mdc-theme-prop(background-color, $foreground-color);
8181
}
8282

83-
.mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron {
83+
.mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron,
84+
.mat-mdc-focus-indicator::before,
85+
.mat-mdc-focus-indicator::before {
8486
@include mdc-theme-prop(border-color, $foreground-color);
8587
}
8688
}

src/material/tabs/_tabs-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,9 @@
116116
}
117117

118118
// Set pagination chevrons to contrast background
119-
> .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
119+
> .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
120+
> .mat-tab-links .mat-focus-indicator::before,
121+
> .mat-tab-header .mat-focus-indicator::before {
120122
border-color: mat-color($background-color, default-contrast);
121123
}
122124

0 commit comments

Comments
 (0)