diff --git a/src/material/expansion/_expansion-mixins.scss b/src/material/expansion/_expansion-mixins.scss new file mode 100644 index 000000000000..cb515119e284 --- /dev/null +++ b/src/material/expansion/_expansion-mixins.scss @@ -0,0 +1,11 @@ +@mixin mat-private-expansion-focus { + .mat-expansion-panel { + & .mat-expansion-panel-header.cdk-keyboard-focused, + & .mat-expansion-panel-header.cdk-program-focused, + &:not(.mat-expanded) .mat-expansion-panel-header:hover { + &:not([aria-disabled='true']) { + @content; + } + } + } +} diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 914816ca07d1..5f52f956822c 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -4,6 +4,7 @@ @import '../core/style/private'; @import '../core/typography/typography-utils'; @import './expansion-variables'; +@import './expansion-mixins'; @mixin mat-expansion-panel-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -20,14 +21,8 @@ border-top-color: mat-color($foreground, divider); } - .mat-expansion-panel { - & .mat-expansion-panel-header.cdk-keyboard-focused, - & .mat-expansion-panel-header.cdk-program-focused, - &:not(.mat-expanded) .mat-expansion-panel-header:hover { - &:not([aria-disabled='true']) { - background: mat-color($background, hover); - } - } + @include mat-private-expansion-focus { + background: mat-color($background, hover); } // Disable the hover on touch devices since it can appear like it is stuck. We can't use diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 0cff73550702..fd3f4e2ec93c 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -1,4 +1,7 @@ +@import '../core/style/layout-common'; +@import '../../cdk/a11y/a11y'; @import './expansion-variables'; +@import './expansion-mixins'; .mat-expansion-panel-header { display: flex; @@ -76,3 +79,19 @@ transform: rotate(45deg); vertical-align: middle; } + +@include cdk-high-contrast(active, off) { + @include mat-private-expansion-focus { + &::before { + // These styles are identical to the ones generated for all + // `.mat-focus-indicator` when strong focus indication is enabled. + // We have to repeat them, because strong focus is opt-in. + @include mat-fill(); + box-sizing: border-box; + pointer-events: none; + border: 3px solid; + border-radius: 4px; + content: ''; + } + } +}