fix(material/slider): fix internal focus state on safari (#28243)

* fix(material/slider): fix internal focus state on safari

* Fixes #28211

* fixup! fix(material/slider): fix internal focus state on safari

Author: wagnermaciel

src/material/slider/slider-input.ts

@@ -476,6 +476,9 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
   _onPointerUp(): void {
     if (this._isActive) {
       this._isActive = false;
+      if (this._platform.SAFARI) {
+        this._setIsFocused(false);
+      }
       this.dragEnd.emit({source: this, parent: this._slider, value: this.value});
 
       // This setTimeout is to prevent the pointerup from triggering a value

src/material/slider/slider-thumb.ts

@@ -18,6 +18,7 @@ import {
   OnDestroy,
   ViewChild,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import {MatRipple, RippleAnimationConfig, RippleRef, RippleState} from '@angular/material/core';
 import {
@@ -28,6 +29,7 @@ import {
   MAT_SLIDER,
   MAT_SLIDER_VISUAL_THUMB,
 } from './slider-interface';
+import {Platform} from '@angular/cdk/platform';
 
 /**
  * The visual slider thumb.
@@ -96,6 +98,8 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
   /** The host native HTML input element. */
   _hostElement: HTMLElement;
 
+  private _platform = inject(Platform);
+
   constructor(
     readonly _cdr: ChangeDetectorRef,
     private readonly _ngZone: NgZone,
@@ -189,6 +193,12 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
     if (!this._sliderInput._isFocused) {
       this._hideRipple(this._focusRippleRef);
     }
+
+    // On Safari we need to immediately re-show the hover ripple because
+    // sliders do not retain focus from pointer events on that platform.
+    if (this._platform.SAFARI) {
+      this._showHoverRipple();
+    }
   };
 
   /** Handles displaying the hover ripple. */

src/material/slider/slider.spec.ts

@@ -627,7 +627,13 @@ describe('MDC-based MatSlider', () => {
       pointerdown();
       pointerup();
       flush();
-      expect(isRippleVisible('focus')).toBeTrue();
+
+      // The slider immediately loses focus on pointerup for Safari.
+      if (platform.SAFARI) {
+        expect(isRippleVisible('hover')).toBeTrue();
+      } else {
+        expect(isRippleVisible('focus')).toBeTrue();
+      }
     }));
 
     it('should hide the focus ripple on blur', fakeAsync(() => {