Skip to content

Commit cc9758d

Browse files
authored
Revert "fix(material/slider): some screen readers announcing long decimal values (#20760)" (#20849)
This reverts commit 19f5f5c. Reverting this for two reasons: * the truthiness check is a bit too broad, preventing someone from setting the empty string or zero * I'd prefer to have the input named `valuetext` rather than `aria-valuetext` since it's potentially confusing without supporting the `attr.` (I know we do this elsewhere, but I'd like to avoid more use of this pattern)
1 parent 018d6c9 commit cc9758d

File tree

3 files changed

+2
-35
lines changed

3 files changed

+2
-35
lines changed

src/material/slider/slider.spec.ts

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -507,27 +507,6 @@ describe('MatSlider', () => {
507507
expect(sliderInstance.value).toBe(0.3);
508508
});
509509

510-
it('should set the truncated value to the aria-valuetext', () => {
511-
fixture.componentInstance.step = 0.1;
512-
fixture.detectChanges();
513-
514-
dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333);
515-
fixture.detectChanges();
516-
517-
expect(sliderNativeElement.getAttribute('aria-valuetext')).toBe('33');
518-
});
519-
520-
it('should be able to override the aria-valuetext', () => {
521-
fixture.componentInstance.step = 0.1;
522-
fixture.componentInstance.ariaValuetext = 'custom';
523-
fixture.detectChanges();
524-
525-
dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333);
526-
fixture.detectChanges();
527-
528-
expect(sliderNativeElement.getAttribute('aria-valuetext')).toBe('custom');
529-
});
530-
531510
});
532511

533512
describe('slider with auto ticks', () => {
@@ -1515,12 +1494,11 @@ class SliderWithMinAndMax {
15151494
class SliderWithValue { }
15161495

15171496
@Component({
1518-
template: `<mat-slider [step]="step" [aria-valuetext]="ariaValuetext"></mat-slider>`,
1497+
template: `<mat-slider [step]="step"></mat-slider>`,
15191498
styles: [styles],
15201499
})
15211500
class SliderWithStep {
15221501
step = 25;
1523-
ariaValuetext: string;
15241502
}
15251503

15261504
@Component({

src/material/slider/slider.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,6 @@ const _MatSliderMixinBase:
134134
'[attr.aria-valuemax]': 'max',
135135
'[attr.aria-valuemin]': 'min',
136136
'[attr.aria-valuenow]': 'value',
137-
138-
// NVDA and Jaws appear to announce the `aria-valuenow` by calculating its percentage based
139-
// on its value between `aria-valuemin` and `aria-valuemax`. Due to how decimals are handled,
140-
// it can cause the slider to read out a very long value like 0.20000068 if the current value
141-
// is 0.2 with a min of 0 and max of 1. We work around the issue by setting `aria-valuetext`
142-
// to the same value that we set on the slider's thumb which will be truncated.
143-
'[attr.aria-valuetext]': 'ariaValuetext || displayValue',
144137
'[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
145138
'[class.mat-slider-disabled]': 'disabled',
146139
'[class.mat-slider-has-ticks]': 'tickInterval',
@@ -275,9 +268,6 @@ export class MatSlider extends _MatSliderMixinBase
275268
*/
276269
@Input() displayWith: (value: number) => string | number;
277270

278-
/** Text corresponding to the slider's value. */
279-
@Input('aria-valuetext') ariaValuetext: string;
280-
281271
/** Whether the slider is vertical. */
282272
@Input()
283273
get vertical(): boolean { return this._vertical; }

tools/public_api_guard/material/slider.d.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
55
protected _document: Document;
66
_isActive: boolean;
77
_isSliding: boolean;
8-
ariaValuetext: string;
98
readonly change: EventEmitter<MatSliderChange>;
109
get displayValue(): string | number;
1110
displayWith: (value: number) => string | number;
@@ -72,7 +71,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
7271
static ngAcceptInputType_tickInterval: NumberInput;
7372
static ngAcceptInputType_value: NumberInput;
7473
static ngAcceptInputType_vertical: BooleanInput;
75-
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"; "ariaValuetext": "aria-valuetext"; "vertical": "vertical"; }, { "change": "change"; "input": "input"; "valueChange": "valueChange"; }, never, never>;
74+
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>;
7675
static ɵfac: i0.ɵɵFactoryDef<MatSlider, [null, null, null, { optional: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
7776
}
7877

0 commit comments

Comments
 (0)