Skip to content

Commit 29f6b6b

Browse files
authored
fix(material/chips): make focus overlay not affect text color (#25892)
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 a38e08a commit 29f6b6b

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)