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

Jump to bottom

fix(material-experimental/mdc-slide-toggle): strong focus indication not visible #19048

Merged
merged 1 commit into from Apr 20, 2020
Merged

fix(material-experimental/mdc-slide-toggle): strong focus indication not visible #19048

Show file tree
Hide file tree
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@
// MDC's switch doesn't support a `color` property. We add support
// for it by adding a CSS class for accent and warn style.
.mat-mdc-slide-toggle {
.mdc-switch__thumb-underlay::before, .mat-ripple-element {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $mdc-switch-toggled-off-ripple-color;
}

Expand All @@ -51,18 +51,18 @@

// The ripple color matches the palette only when it's checked.
.mat-mdc-slide-toggle-checked {
.mdc-switch__thumb-underlay::before, .mat-ripple-element {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $primary;
}

&.mat-accent {
.mdc-switch__thumb-underlay::before, .mat-ripple-element {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $accent;
}
}

&.mat-warn {
.mdc-switch__thumb-underlay::before, .mat-ripple-element {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $warn;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-slide-toggle/slide-toggle.html
View file
Open in desktop
Expand Up @@ -2,8 +2,8 @@
[class.mdc-form-field--align-end]="labelPosition == 'before'">
<div class="mdc-switch" #switch>
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mat-mdc-slide-toggle-ripple mat-mdc-focus-indicator" mat-ripple
<div class="mdc-switch__thumb-underlay mat-mdc-focus-indicator">
<div class="mat-mdc-slide-toggle-ripple" mat-ripple
[matRippleTrigger]="switch"
[matRippleDisabled]="disableRipple || disabled"
[matRippleCentered]="true"
Expand Down
12 changes: 7 additions & 5 deletions src/material-experimental/mdc-slide-toggle/slide-toggle.scss
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@
display: inline-block;

// The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
.mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::before {
.mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::after {
@include mat-fill;

// Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
Expand All @@ -26,19 +26,21 @@
// The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.
// We currently don't use the MDC ripple due to size concerns, therefore we need to add some
// additional styles to restore the hover state.
.mdc-switch__thumb-underlay::before {
// We use `::after`, rather than `::before`, because `::before` is used by the
// generic strong focus indication styles.
.mdc-switch__thumb-underlay::after {
border-radius: 50%;
content: '';
opacity: 0;
}

.mdc-switch:hover .mdc-switch__thumb-underlay::before {
.mdc-switch:hover .mdc-switch__thumb-underlay::after {
opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
transition: mdc-switch-transition-enter(opacity, 0, 75ms);
}

// Needs a little more specificity so the :hover styles don't override it.
&.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::before {
&.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::after {
opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
}

Expand All @@ -57,7 +59,7 @@
// conditionally add them. Consider the size cost when deciding whether to switch.
&._mat-animation-noopable {
.mdc-switch__thumb-underlay,
.mdc-switch__thumb-underlay::before {
.mdc-switch__thumb-underlay::after {
transition: none;
}
}
Expand Down
7 changes: 2 additions & 5 deletions src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
View file
Open in desktop
Expand Up @@ -299,11 +299,8 @@ describe('MDC-based MatSlideToggle without forms', () => {
});

it('should have a focus indicator', () => {
const slideToggleRippleNativeElement =
slideToggleElement.querySelector('.mat-mdc-slide-toggle-ripple')!;

expect(slideToggleRippleNativeElement.classList.contains('mat-mdc-focus-indicator'))
.toBe(true);
const underlayElement = slideToggleElement.querySelector('.mdc-switch__thumb-underlay')!;
expect(underlayElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
});
});

Expand Down