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)

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

@@ -59,7 +59,8 @@
   // These components have to set `border-radius: 50%` in order to support density scaling
   // which will clip a square focus indicator so we have to turn it into a circle.
   .mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
-  .mat-radio-ripple.mat-mdc-focus-indicator::before {
+  .mat-radio-ripple.mat-mdc-focus-indicator::before,
+  .mat-mdc-slider .mat-mdc-focus-indicator::before {
     border-radius: 50%;
   }
 
@@ -80,6 +81,9 @@
   // For options, render the focus indicator when the class .mat-mdc-option-active is present.
   .mat-mdc-focus-indicator.mat-mdc-option-active::before,
 
+  // In the MDC slider the focus indicator is inside the thumb.
+  .mdc-slider__thumb--focused .mat-mdc-focus-indicator::before,
+
     // For all other components, render the focus indicator on focus.
   .mat-mdc-focus-indicator:focus::before {
     content: '';

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

@@ -4,4 +4,7 @@
   </div>
 </div>
 <div class="mdc-slider__thumb-knob" #knob></div>
-<div matRipple [matRippleDisabled]="true"></div>
+<div
+  matRipple
+  class="mat-mdc-focus-indicator"
+  [matRippleDisabled]="true"></div>

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

@@ -111,6 +111,7 @@ describe('MDC-based MatSlider' , () => {
   describe('standard range slider', () => {
     let sliderInstance: MatSlider;
     let startInputInstance: MatSliderThumb;
+    let sliderElement: HTMLElement;
     let endInputInstance: MatSliderThumb;
 
     beforeEach(waitForAsync(() => {
@@ -119,6 +120,7 @@ describe('MDC-based MatSlider' , () => {
       const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
       sliderInstance = sliderDebugElement.componentInstance;
       startInputInstance = sliderInstance._getInput(Thumb.START);
+      sliderElement = sliderDebugElement.nativeElement;
       endInputInstance = sliderInstance._getInput(Thumb.END);
     }));
 
@@ -174,6 +176,12 @@ describe('MDC-based MatSlider' , () => {
       slideToValue(sliderInstance, 25, Thumb.END, platform.IOS);
       expect(startInputInstance.value).toBe(50);
     });
+
+    it('should have a strong focus indicator in each of the thumbs', () => {
+      const indicators =
+        sliderElement.querySelectorAll('.mat-mdc-slider-visual-thumb .mat-mdc-focus-indicator');
+      expect(indicators.length).toBe(2);
+    });
   });
 
   describe('disabled slider', () => {