fix(material/slider): some screen readers announcing long decimal values (#20870)

It looks like some screen readers announce the value of a slider by calculating the
percentage themselves using the `aria-valuemin`, `aria-valuemax` and `aria-valuenow`.
The problem is that they don't round down the decimals so for a slider between 0 and 1
with a step of 0.1, they end up reading out values like 0.20000068. These changes work
around the issue by setting `aria-valuetext` to the same value that we shown in the thumb
which we truncate ourselves.

Fixes #20719.

(cherry picked from commit 9f4415e)

Author: crisbeto

src/material/slider/slider.spec.ts

@@ -507,6 +507,37 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(0.3);
     });
 
+    it('should set the truncated value to the aria-valuetext', () => {
+      fixture.componentInstance.step = 0.1;
+      fixture.detectChanges();
+
+      dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333);
+      fixture.detectChanges();
+
+      expect(sliderNativeElement.getAttribute('aria-valuetext')).toBe('33');
+    });
+
+    it('should be able to override the aria-valuetext', () => {
+      fixture.componentInstance.step = 0.1;
+      fixture.componentInstance.valueText = 'custom';
+      fixture.detectChanges();
+
+      dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333);
+      fixture.detectChanges();
+
+      expect(sliderNativeElement.getAttribute('aria-valuetext')).toBe('custom');
+    });
+
+    it('should be able to clear aria-valuetext', () => {
+      fixture.componentInstance.valueText = '';
+      fixture.detectChanges();
+
+      dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333);
+      fixture.detectChanges();
+
+      expect(sliderNativeElement.getAttribute('aria-valuetext')).toBeFalsy();
+    });
+
   });
 
   describe('slider with auto ticks', () => {
@@ -1494,11 +1525,12 @@ class SliderWithMinAndMax {
 class SliderWithValue { }
 
 @Component({
-  template: `<mat-slider [step]="step"></mat-slider>`,
+  template: `<mat-slider [step]="step" [valueText]="valueText"></mat-slider>`,
   styles: [styles],
 })
 class SliderWithStep {
   step = 25;
+  valueText: string;
 }
 
 @Component({

src/material/slider/slider.ts

@@ -134,6 +134,13 @@ const _MatSliderMixinBase:
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuemin]': 'min',
     '[attr.aria-valuenow]': 'value',
+
+    // NVDA and Jaws appear to announce the `aria-valuenow` by calculating its percentage based
+    // on its value between `aria-valuemin` and `aria-valuemax`. Due to how decimals are handled,
+    // it can cause the slider to read out a very long value like 0.20000068 if the current value
+    // is 0.2 with a min of 0 and max of 1. We work around the issue by setting `aria-valuetext`
+    // to the same value that we set on the slider's thumb which will be truncated.
+    '[attr.aria-valuetext]': 'valueText == null ? displayValue : valueText',
     '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
     '[class.mat-slider-disabled]': 'disabled',
     '[class.mat-slider-has-ticks]': 'tickInterval',
@@ -268,6 +275,9 @@ export class MatSlider extends _MatSliderMixinBase
    */
   @Input() displayWith: (value: number) => string | number;
 
+  /** Text corresponding to the slider's value. Used primarily for improved accessibility. */
+  @Input() valueText: string;
+
   /** Whether the slider is vertical. */
   @Input()
   get vertical(): boolean { return this._vertical; }

tools/public_api_guard/material/slider.d.ts

@@ -26,6 +26,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
     get value(): number | null;
     set value(v: number | null);
     readonly valueChange: EventEmitter<number | null>;
+    valueText: string;
     get vertical(): boolean;
     set vertical(value: boolean);
     constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _ngZone: NgZone, _document: any, _animationMode?: string | undefined);
@@ -71,7 +72,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
     static ngAcceptInputType_tickInterval: NumberInput;
     static ngAcceptInputType_value: NumberInput;
     static ngAcceptInputType_vertical: BooleanInput;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSlider, "mat-slider", ["matSlider"], { "disabled": "disabled"; "color": "color"; "tabIndex": "tabIndex"; "invert": "invert"; "max": "max"; "min": "min"; "step": "step"; "thumbLabel": "thumbLabel"; "tickInterval": "tickInterval"; "value": "value"; "displayWith": "displayWith"; "vertical": "vertical"; }, { "change": "change"; "input": "input"; "valueChange": "valueChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSlider, "mat-slider", ["matSlider"], { "disabled": "disabled"; "color": "color"; "tabIndex": "tabIndex"; "invert": "invert"; "max": "max"; "min": "min"; "step": "step"; "thumbLabel": "thumbLabel"; "tickInterval": "tickInterval"; "value": "value"; "displayWith": "displayWith"; "valueText": "valueText"; "vertical": "vertical"; }, { "change": "change"; "input": "input"; "valueChange": "valueChange"; }, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatSlider, [null, null, null, { optional: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
 }