Skip to content

Commit

Permalink
fix(list): no selected indication in high contrast mode while… (#18585)
Browse files Browse the repository at this point in the history
When a selection list is in single selection mode, it indicates which item is selected by changing its background color which is invisible in high contrast mode. These changes work around the issue by rendering out a circle next to the selected item. I went with the circle since it looks like a radio button which is what the list behaves as.
  • Loading branch information
crisbeto committed Mar 21, 2020
1 parent 2a6aae1 commit 76e8a38
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions src/material/list/list.scss
Expand Up @@ -325,6 +325,27 @@ mat-action-list {
outline: dotted 1px;
}
}

// 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-list-single-selected-option::after {
$size: 10px;
content: '';
position: absolute;
top: 50%;
right: $mat-list-side-padding;
transform: translateY(-50%);
width: $size;
height: 0;
border-bottom: solid $size;
border-radius: $size;
}

[dir='rtl'] .mat-list-single-selected-option::after {
right: auto;
left: $mat-list-side-padding;
}
}


Expand Down

0 comments on commit 76e8a38

Please sign in to comment.