Skip to content

Commit 427bbdd

Browse files
devversionandrewseguin
authored andcommitted
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.
1 parent 015c350 commit 427bbdd

File tree

3 files changed

+17
-9
lines changed

3 files changed

+17
-9
lines changed

src/material-experimental/mdc-form-field/_form-field-high-contrast.scss

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,10 @@
2020
}
2121
}
2222

23-
// For form fields with outline appearance, we unset the outline solid borders
24-
// and show a dashed thick border to indicate focus.
23+
// For form fields with outline appearance, we show a dashed thick border on top
24+
// of the solid notched-outline border to indicate focus.
2525
.mat-mdc-form-field.mat-focused .mdc-notched-outline {
2626
@include a11y.high-contrast(active, off) {
27-
.mdc-notched-outline__leading,
28-
.mdc-notched-outline__trailing,
29-
.mdc-notched-outline__notch, {
30-
border: none;
31-
}
32-
3327
border: $focus-indicator-style $focus-indicator-width;
3428
}
3529
}

src/material/form-field/form-field-fill.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ $fill-subscript-padding:
3333
}
3434
}
3535

36+
&.mat-focused .mat-form-field-flex {
37+
@include a11y.high-contrast(active, off) {
38+
outline: dashed 3px;
39+
}
40+
}
41+
3642
.mat-form-field-underline::before {
3743
content: '';
3844
display: block;
@@ -47,8 +53,9 @@ $fill-subscript-padding:
4753
height: $fill-underline-ripple-height;
4854

4955
@include a11y.high-contrast(active, off) {
56+
// In high-contrast mode, we hide the ripple as we have a dashed outline as
57+
// focus indicator.
5058
height: 0;
51-
border-top: solid $fill-underline-ripple-height;
5259
}
5360
}
5461

src/material/form-field/form-field-outline.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../core/style/variables';
22
@use '../core/style/private';
3+
@use '../../cdk/a11y';
34

45
// Styles that only apply to the outline appearance of the form-field.
56

@@ -117,6 +118,12 @@ $outline-subscript-padding:
117118
}
118119
}
119120

121+
&.mat-focused .mat-form-field-outline-thick {
122+
@include a11y.high-contrast(active, off) {
123+
border: 3px dashed;
124+
}
125+
}
126+
120127
&:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
121128
& .mat-form-field-outline {
122129
opacity: 0;

0 commit comments

Comments
 (0)