Skip to content

Commit d3deb8b

Browse files
authored
fix(material/expansion): add focus indication in high contrast mode (#21549)
The expansion panel header changes its background color when it receives focus which isn't visible in high contrast mode. These changes add an outline around it which is more visible. Fixes #21544.
1 parent 435a741 commit d3deb8b

File tree

3 files changed

+33
-8
lines changed

3 files changed

+33
-8
lines changed
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@mixin mat-private-expansion-focus {
2+
.mat-expansion-panel {
3+
& .mat-expansion-panel-header.cdk-keyboard-focused,
4+
& .mat-expansion-panel-header.cdk-program-focused,
5+
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
6+
&:not([aria-disabled='true']) {
7+
@content;
8+
}
9+
}
10+
}
11+
}

src/material/expansion/_expansion-theme.scss

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import '../core/style/private';
55
@import '../core/typography/typography-utils';
66
@import './expansion-variables';
7+
@import './expansion-mixins';
78

89
@mixin mat-expansion-panel-color($config-or-theme) {
910
$config: mat-get-color-config($config-or-theme);
@@ -20,14 +21,8 @@
2021
border-top-color: mat-color($foreground, divider);
2122
}
2223

23-
.mat-expansion-panel {
24-
& .mat-expansion-panel-header.cdk-keyboard-focused,
25-
& .mat-expansion-panel-header.cdk-program-focused,
26-
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
27-
&:not([aria-disabled='true']) {
28-
background: mat-color($background, hover);
29-
}
30-
}
24+
@include mat-private-expansion-focus {
25+
background: mat-color($background, hover);
3126
}
3227

3328
// Disable the hover on touch devices since it can appear like it is stuck. We can't use

src/material/expansion/expansion-panel-header.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
@import '../core/style/layout-common';
2+
@import '../../cdk/a11y/a11y';
13
@import './expansion-variables';
4+
@import './expansion-mixins';
25

36
.mat-expansion-panel-header {
47
display: flex;
@@ -76,3 +79,19 @@
7679
transform: rotate(45deg);
7780
vertical-align: middle;
7881
}
82+
83+
@include cdk-high-contrast(active, off) {
84+
@include mat-private-expansion-focus {
85+
&::before {
86+
// These styles are identical to the ones generated for all
87+
// `.mat-focus-indicator` when strong focus indication is enabled.
88+
// We have to repeat them, because strong focus is opt-in.
89+
@include mat-fill();
90+
box-sizing: border-box;
91+
pointer-events: none;
92+
border: 3px solid;
93+
border-radius: 4px;
94+
content: '';
95+
}
96+
}
97+
}

0 commit comments

Comments
 (0)