From 25ce8e775c8344407159381fdb61066d216e054e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 11 Jul 2022 15:26:56 +0200 Subject: [PATCH] fix(material/select): add selected indication in high contrast mode (#25237) Currently we don't indicate which `mat-option` is selected in single-selection mode to high contrast users. These changes add a small indicator similar to the one in `mat-selection-list`. (cherry picked from commit 5c8c7e823e89e0ab0a7ef750a55f73f8a945fe24) --- .../mdc-core/option/option.scss | 33 ++++++++++++++----- src/material/core/option/option.scss | 21 ++++++++++++ 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index 5998db2e8b57..dbd096bb71fe 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -1,5 +1,6 @@ @use '@angular/cdk'; @use '@angular/material' as mat; +@use '@angular/cdk'; @use '@material/list/evolution-mixins' as mdc-list-mixins; @use '@material/list/evolution-variables' as mdc-list-variables; @use 'sass:map'; @@ -26,15 +27,6 @@ $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height); min-height: map.get($height-config, default); - // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo - // element that will stretch the option to the correct height. See: - // https://connect.microsoft.com/IE/feedback/details/802625 - &::after { - display: inline-block; - min-height: inherit; - content: ''; - } - &.mdc-list-item--disabled { // This is the same as `mdc-list-mixins.list-disabled-opacity` which // we can't use directly, because it comes with some selectors. @@ -89,6 +81,29 @@ text-decoration: inherit; text-transform: inherit; } + + @include cdk.high-contrast(active, off) { + // In single selection mode, the selected option is indicated by changing its + // background color, but that doesn't work in high contrast mode. We add an + // alternate indication by rendering out a circle. + &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after { + $size: 10px; + content: ''; + position: absolute; + top: 50%; + right: mdc-list-variables.$side-padding; + transform: translateY(-50%); + width: $size; + height: 0; + border-bottom: solid $size; + border-radius: $size; + } + + [dir='rtl'] &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after { + right: auto; + left: mdc-list-variables.$side-padding; + } + } } .mat-mdc-option-active { diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index b1f77c8a55f0..f01e068bd0f3 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -53,6 +53,27 @@ &[aria-disabled='true'] { opacity: 0.5; } + + // In single selection mode, the selected option is indicated by changing its + // background color, but that doesn't work in high contrast mode. We add an + // alternate indication by rendering out a circle. + &.mat-selected:not(.mat-option-multiple)::after { + $size: 10px; + content: ''; + position: absolute; + top: 50%; + right: menu-common.$side-padding; + transform: translateY(-50%); + width: $size; + height: 0; + border-bottom: solid $size; + border-radius: $size; + } + + [dir='rtl'] &.mat-selected:not(.mat-option-multiple)::after { + right: auto; + left: menu-common.$side-padding; + } } }