Skip to content

fix(material/form-field): use correct color for form fields in high contrast mode #24422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,20 @@
$focus-indicator-width: 3px;
$focus-indicator-style: dashed;

// The outline of the `fill` appearance is achieved through a background color
// which won't be visible in high contrast mode. Add an outline to replace it.
.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
.mat-form-field-appearance-fill {
// The outline of the `fill` appearance is achieved through a background color
// which won't be visible in high contrast mode. Add an outline to replace it.
.mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}

// Use GreyText for the disabled outline color which will account for the user's configuration.
&.mat-form-field-disabled .mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline-color: GrayText;
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/material-experimental/mdc-select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ $scale: 0.75 !default;
// On Chromium browsers the `currentColor` blends in with the
// background for SVGs so we have to fall back to `CanvasText`.
fill: CanvasText;

.mat-mdc-select-disabled & {
fill: GrayText;
}
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field-fill.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ $fill-subscript-padding: math.div($fill-side-padding, $fill-subscript-font-scale
}
}

&.mat-form-field-disabled .mat-form-field-flex {
@include a11y.high-contrast(active, off) {
outline-color: GrayText;
}
}

&.mat-focused .mat-form-field-flex {
@include a11y.high-contrast(active, off) {
outline: dashed 3px;
Expand Down
1 change: 1 addition & 0 deletions src/material/form-field/form-field-legacy.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ $legacy-underline-height: 1px !default;
@include a11y.high-contrast(active, off) {
border-top-style: dotted;
border-top-width: 2px;
border-top-color: GrayText;
}
}

Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field-outline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,12 @@ $outline-subscript-padding: math.div($outline-side-padding, $outline-subscript-f
padding: 0 $outline-subscript-padding;
}

&.mat-form-field-disabled .mat-form-field-outline {
@include a11y.high-contrast(active, off) {
color: GrayText;
}
}

&._mat-animation-noopable {
&:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
.mat-form-field-outline,
Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ $default-infix-width: 180px !default;
left: auto;
right: 0;
}

.mat-form-field-disabled & {
@include a11y.high-contrast(active, off) {
color: GrayText;
}
}
}

.mat-form-field-empty.mat-form-field-label,
Expand Down