Skip to content

Commit 5a53953

Browse files
crisbetowagnermaciel
authored andcommitted
fix(material-experimental/mdc-slider): add strong focus indication (#23040)
Fixes that the MDC-based slider didn't have a strong focus indicator. (cherry picked from commit 32e4bb4)
1 parent 2f90fc2 commit 5a53953

File tree

3 files changed

+17
-2
lines changed

3 files changed

+17
-2
lines changed

src/material-experimental/mdc-helpers/_focus-indicators.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
// These components have to set `border-radius: 50%` in order to support density scaling
6060
// which will clip a square focus indicator so we have to turn it into a circle.
6161
.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
62-
.mat-radio-ripple.mat-mdc-focus-indicator::before {
62+
.mat-radio-ripple.mat-mdc-focus-indicator::before,
63+
.mat-mdc-slider .mat-mdc-focus-indicator::before {
6364
border-radius: 50%;
6465
}
6566

@@ -80,6 +81,9 @@
8081
// For options, render the focus indicator when the class .mat-mdc-option-active is present.
8182
.mat-mdc-focus-indicator.mat-mdc-option-active::before,
8283

84+
// In the MDC slider the focus indicator is inside the thumb.
85+
.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before,
86+
8387
// For all other components, render the focus indicator on focus.
8488
.mat-mdc-focus-indicator:focus::before {
8589
content: '';

src/material-experimental/mdc-slider/slider-thumb.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@
44
</div>
55
</div>
66
<div class="mdc-slider__thumb-knob" #knob></div>
7-
<div matRipple [matRippleDisabled]="true"></div>
7+
<div
8+
matRipple
9+
class="mat-mdc-focus-indicator"
10+
[matRippleDisabled]="true"></div>

src/material-experimental/mdc-slider/slider.spec.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ describe('MDC-based MatSlider' , () => {
111111
describe('standard range slider', () => {
112112
let sliderInstance: MatSlider;
113113
let startInputInstance: MatSliderThumb;
114+
let sliderElement: HTMLElement;
114115
let endInputInstance: MatSliderThumb;
115116

116117
beforeEach(waitForAsync(() => {
@@ -119,6 +120,7 @@ describe('MDC-based MatSlider' , () => {
119120
const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
120121
sliderInstance = sliderDebugElement.componentInstance;
121122
startInputInstance = sliderInstance._getInput(Thumb.START);
123+
sliderElement = sliderDebugElement.nativeElement;
122124
endInputInstance = sliderInstance._getInput(Thumb.END);
123125
}));
124126

@@ -174,6 +176,12 @@ describe('MDC-based MatSlider' , () => {
174176
slideToValue(sliderInstance, 25, Thumb.END, platform.IOS);
175177
expect(startInputInstance.value).toBe(50);
176178
});
179+
180+
it('should have a strong focus indicator in each of the thumbs', () => {
181+
const indicators =
182+
sliderElement.querySelectorAll('.mat-mdc-slider-visual-thumb .mat-mdc-focus-indicator');
183+
expect(indicators.length).toBe(2);
184+
});
177185
});
178186

179187
describe('disabled slider', () => {

0 commit comments

Comments
 (0)