Skip to content

Commit 6dc3476

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 1f62724 commit 6dc3476

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

src/material/chips/chip.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,11 @@
253253
$offset: calc(#{$border-width} + 2px);
254254
margin: calc(#{$offset} * -1);
255255
}
256+
257+
// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
258+
// does not affect the color of the text. Material spec requires state layer to not interfere with
259+
// text color.
260+
z-index: 1;
256261
}
257262

258263
.mat-mdc-chip-remove {

0 commit comments

Comments
 (0)