From bbba702bbe4569bb31a6baa68cd2dcd30c1642e7 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 16 Jun 2021 19:30:07 +0200 Subject: [PATCH 1/2] fix(material-experimental/mdc-form-field): add stronger focus indicator in high-contrast mode Sets up a stronger focus indicator for form fields in high-contrast mode. --- .../mdc-form-field/BUILD.bazel | 1 + .../mdc-form-field/_form-field-density.scss | 2 +- .../_form-field-high-contrast.scss | 36 +++++++++++++++++++ .../_mdc-text-field-structure-overrides.scss | 8 ----- .../mdc-form-field/form-field.scss | 4 ++- 5 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 src/material-experimental/mdc-form-field/_form-field-high-contrast.scss diff --git a/src/material-experimental/mdc-form-field/BUILD.bazel b/src/material-experimental/mdc-form-field/BUILD.bazel index a6318ca7d6bb..e9836763dd40 100644 --- a/src/material-experimental/mdc-form-field/BUILD.bazel +++ b/src/material-experimental/mdc-form-field/BUILD.bazel @@ -77,6 +77,7 @@ sass_library( srcs = [ "_form-field-density.scss", "_form-field-focus-overlay.scss", + "_form-field-high-contrast.scss", "_form-field-native-select.scss", "_form-field-sizing.scss", "_form-field-subscript.scss", diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 4596d9f49e49..6fa708414c1e 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -33,7 +33,7 @@ // Mixin that includes the density styles for form fields. MDC provides their own density // styles for MDC text-field which we cannot use. MDC relies on input elements to stretch -// vertically when the height is reduced as per density scale. This doesn't work for for our +// vertically when the height is reduced as per density scale. This doesn't work for our // form field since we support custom form field controls without a fixed height. Instead, we // provide spacing that makes arbitrary controls align as specified in the Material Design // specification. In order to support density, we need to adjust the vertical spacing to be diff --git a/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss new file mode 100644 index 000000000000..7f2c6dc57134 --- /dev/null +++ b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss @@ -0,0 +1,36 @@ +@use '../../cdk/a11y'; + +@mixin private-form-field-high-contrast() { + $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; + } + } + + // If a form field with fill appearance is focused, update the outline to be + // dashed and thicker to indicate focus. + .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper { + @include a11y.high-contrast(active, off) { + outline: $focus-indicator-style $focus-indicator-width; + } + } + + // For form fields with outline appearance, we unset the outline solid borders + // and show a dashed thick border to indicate focus. + .mat-mdc-form-field.mat-focused .mdc-notched-outline { + @include a11y.high-contrast(active, off) { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing, + .mdc-notched-outline__notch, { + border: none; + } + + border: $focus-indicator-style $focus-indicator-width; + } + } +} diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss index 9f7c427563c8..d32f1b6d7e29 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss @@ -1,5 +1,4 @@ @use 'form-field-sizing'; -@use '../../cdk/a11y'; // Mixin that can be included to override the default MDC text-field // styles to fit our needs. See individual comments for context on why @@ -113,11 +112,4 @@ content: none; } - // 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; - } - } } diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss index 7e0be3ee4377..7b365b37e900 100644 --- a/src/material-experimental/mdc-form-field/form-field.scss +++ b/src/material-experimental/mdc-form-field/form-field.scss @@ -5,6 +5,7 @@ @use './form-field-sizing'; @use './form-field-subscript'; @use './form-field-focus-overlay'; +@use './form-field-high-contrast'; @use './form-field-native-select'; @use './mdc-text-field-textarea-overrides'; @use './mdc-text-field-structure-overrides'; @@ -23,10 +24,11 @@ @include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides(); @include mdc-text-field-structure-overrides.private-text-field-structure-overrides(); -// Include the subscript, focus-overlay and native select styles. +// Include the subscript, focus-overlay, native select and high-contrast styles. @include form-field-subscript.private-form-field-subscript(); @include form-field-focus-overlay.private-form-field-focus-overlay(); @include form-field-native-select.private-form-field-native-select(); +@include form-field-high-contrast.private-form-field-high-contrast(); // Host element of the form-field. It contains the mdc-text-field wrapper // and the subscript wrapper. From 7c15335ce57ba5913496da553539f38fe54270c3 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 16 Jun 2021 20:04:15 +0200 Subject: [PATCH 2/2] fix(material/form-field): missing focus indicator for outline appearance in high-contrast In high-contast mode, form fields in outline appearance do not have any focus indication. This commit adds a focus indicator in high-contrast mode. Additionally, the focus indication for filled form fields has been improved. Instead of relying on the underline ripple that overlaps with the outline, we thicken the outline border on focus (similar as with the outline appearance). Fixes #22989. --- .../mdc-form-field/_form-field-high-contrast.scss | 10 ++-------- src/material/form-field/form-field-fill.scss | 9 ++++++++- src/material/form-field/form-field-outline.scss | 7 +++++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss index 7f2c6dc57134..a6205e9c93e9 100644 --- a/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss +++ b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss @@ -20,16 +20,10 @@ } } - // For form fields with outline appearance, we unset the outline solid borders - // and show a dashed thick border to indicate focus. + // For form fields with outline appearance, we show a dashed thick border on top + // of the solid notched-outline border to indicate focus. .mat-mdc-form-field.mat-focused .mdc-notched-outline { @include a11y.high-contrast(active, off) { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing, - .mdc-notched-outline__notch, { - border: none; - } - border: $focus-indicator-style $focus-indicator-width; } } diff --git a/src/material/form-field/form-field-fill.scss b/src/material/form-field/form-field-fill.scss index 38c8d69eea37..2468d5174114 100644 --- a/src/material/form-field/form-field-fill.scss +++ b/src/material/form-field/form-field-fill.scss @@ -33,6 +33,12 @@ $fill-subscript-padding: } } + &.mat-focused .mat-form-field-flex { + @include a11y.high-contrast(active, off) { + outline: dashed 3px; + } + } + .mat-form-field-underline::before { content: ''; display: block; @@ -47,8 +53,9 @@ $fill-subscript-padding: height: $fill-underline-ripple-height; @include a11y.high-contrast(active, off) { + // In high-contrast mode, we hide the ripple as we have a dashed outline as + // focus indicator. height: 0; - border-top: solid $fill-underline-ripple-height; } } diff --git a/src/material/form-field/form-field-outline.scss b/src/material/form-field/form-field-outline.scss index e4302ecdd8f6..1320a8908654 100644 --- a/src/material/form-field/form-field-outline.scss +++ b/src/material/form-field/form-field-outline.scss @@ -1,5 +1,6 @@ @use '../core/style/variables'; @use '../core/style/private'; +@use '../../cdk/a11y'; // Styles that only apply to the outline appearance of the form-field. @@ -117,6 +118,12 @@ $outline-subscript-padding: } } + &.mat-focused .mat-form-field-outline-thick { + @include a11y.high-contrast(active, off) { + border: 3px dashed; + } + } + &:not(.mat-form-field-disabled) .mat-form-field-flex:hover { & .mat-form-field-outline { opacity: 0;