Skip to content

Commit

Permalink
fix(material/form-field): use correct color for form fields in high c…
Browse files Browse the repository at this point in the history
…ontrast mode (#24422)

Fixes that we weren't using the correct colors for disabled form field in high contrast mode on Windows.
  • Loading branch information
crisbeto authored Feb 17, 2022
1 parent dbcd140 commit 19b8934
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 5 deletions.
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

0 comments on commit 19b8934

Please sign in to comment.