From 6dc3476b4a002370b75ffcb7cc1d73cf9bedb75c Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Fri, 28 Oct 2022 20:52:19 +0000 Subject: [PATCH] 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. --- src/material/chips/chip.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 44eb19272160..5d9ede7513f3 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -253,6 +253,11 @@ $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); } + + // Give the text label a higher z-index than the focus overlay to ensure that the focus overlay + // does not affect the color of the text. Material spec requires state layer to not interfere with + // text color. + z-index: 1; } .mat-mdc-chip-remove {