Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/button-toggle): selected state not visible in high contrast mode #25114

Merged
merged 1 commit into from
Jun 20, 2022
Merged

fix(material/button-toggle): selected state not visible in high contrast mode #25114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix(material/button-toggle): selected state not visible in high contr… 
…ast mode

It looks like at some point we regressed to where the selected indication in high contrast mode became transparent.
  • Loading branch information
@crisbeto
crisbeto committed Jun 19, 2022
commit fadc9819fb4421e652455b68bfee8976443e3268
29 changes: 16 additions & 13 deletions src/material/button-toggle/button-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,33 +108,36 @@ $legacy-border-radius: 2px !default;

// Overlay to be used as a tint.
.mat-button-toggle-focus-overlay {
@include layout-common.fill;
border-radius: inherit;

// Disable pointer events to prevent it from hijacking user events.
pointer-events: none;
opacity: 0;
@include layout-common.fill;
}

@include cdk.high-contrast(active, off) {
// Changing the background color for the selected item won't be visible in high contrast mode.
// We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
// It uses a border, because the browser will render it using a brighter color.
@include cdk.high-contrast(active, off) {
.mat-button-toggle-checked & {
.mat-button-toggle-checked {
.mat-button-toggle-focus-overlay {
border-bottom: solid $legacy-height;
opacity: 0.5;
height: 0;
}
}
}

@include cdk.high-contrast(active, off) {
.mat-button-toggle-checked.mat-button-toggle-appearance-standard
.mat-button-toggle-focus-overlay {
// In high contrast mode, we use a border for the checked state because backgrounds
// can either be opaque or transparent. We set the border height to a value that is larger
// than usual button toggles are. This allows us to keep this high contrast style in the
// base component style, instead of making it dependent on height determined through density.
border-bottom: solid 500px;
&:hover .mat-button-toggle-focus-overlay {
opacity: 0.6;
}

&.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
// In high contrast mode, we use a border for the checked state because backgrounds
// can either be opaque or transparent. We set the border height to a value that is larger
// than usual button toggles are. This allows us to keep this high contrast style in the
// base component style, instead of making it dependent on height determined through density.
border-bottom: solid 500px;
}
}
}

Expand Down