Skip to content

Commit 3aa5527

Browse files
authored
fix(material-experimental/mdc-form-field): fill appearance blending in with the background in high contrast mode (#21446)
The outline of the `fill` appearance is done through a background color which will blend in with the background in high contrast mode. These changes add an outline to replace it.
1 parent c268246 commit 3aa5527

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '@material/notched-outline/variables.import';
22
@import '@material/textfield/variables.import';
33
@import 'form-field-sizing';
4+
@import '../../cdk/a11y/a11y';
45

56
// Mixin that can be included to override the default MDC text-field
67
// styles to fit our needs. See individual comments for context on why
@@ -85,4 +86,12 @@
8586
.mat-mdc-text-field-wrapper::before {
8687
content: none;
8788
}
89+
90+
// The outline of the `fill` appearance is achieved through a background color
91+
// which won't be visible in high contrast mode. Add an outline to replace it.
92+
.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
93+
@include cdk-high-contrast(active, off) {
94+
outline: solid 1px;
95+
}
96+
}
8897
}

0 commit comments

Comments
 (0)