Skip to content

Commit 15237f8

Browse files
crisbetoamysorto
authored andcommitted
fix(material/chips): add selected indication in high contrast mode (#23828)
Currently the single-selection chip shows that it's selected by changing its background color, but that doesn't work in high contrast mode. These changes add a thicker outline when the chip is selected. (cherry picked from commit 2c637d3)
1 parent 2b99632 commit 15237f8

File tree

3 files changed

+14
-0
lines changed

3 files changed

+14
-0
lines changed

src/material-experimental/mdc-chips/chip-option.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export class MatChipSelectionChange {
5050
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
5151
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
5252
'[class.mat-mdc-chip-selected]': 'selected',
53+
'[class.mat-mdc-chip-multiple]': '_chipListMultiple',
5354
'[id]': 'id',
5455
'[tabIndex]': 'tabIndex',
5556
'[attr.disabled]': 'disabled || null',

src/material-experimental/mdc-chips/chips.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,14 @@ $chip-margin: 4px;
141141
}
142142
}
143143

144+
// Single-selection chips show their selected state using a background color which won't be visible
145+
// in high contrast mode. This isn't necessary in multi-selection since there's a checkmark.
146+
.mat-mdc-chip-selected:not(.mat-mdc-chip-multiple) {
147+
@include a11y.high-contrast(active, off) {
148+
outline-width: 3px;
149+
}
150+
}
151+
144152
.mat-mdc-chip-row-focusable-text-content,
145153
.mat-mdc-chip-remove-icon {
146154
display: flex;

src/material/chips/chips.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@ $chip-remove-size: 18px;
9898
// Use 2px here since the dotted outline is a little thinner.
9999
outline: dotted 2px;
100100
}
101+
102+
// Seleted state is shown using a background color which isn't visible in high contrast mode.
103+
&.mat-chip-selected {
104+
outline-width: 3px;
105+
}
101106
}
102107

103108
&.mat-chip-disabled {

0 commit comments

Comments
 (0)