Skip to content

Commit 120d651

Browse files
committed
fix(material/chips): make focus overlay not affect text color
Make focus overlay not affect the text color. Give the text label a higher z-index than the focus overlay to ensure that it does not affect the text color. Material spec requires that state layer does not interfere with text color. Fix issue where focus overlay would be on top of the text and darken the color of the text. This is a deviation from spec and causes a11y issues due to insufficient text contrast.
1 parent a8fc6f0 commit 120d651

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material/chips/chip.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,3 +302,10 @@
302302
.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before {
303303
content: '';
304304
}
305+
306+
// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
307+
// does not affect the color of the text. Material spec requires state layer to not interfere with
308+
// text color.
309+
.mdc-evolution-chip__text-label {
310+
z-index: 1;
311+
}

0 commit comments

Comments
 (0)