diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index 0f6aa23a362..dc0dcaa212c 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/src/lib/progress-spinner/progress-spinner.spec.ts @@ -296,6 +296,31 @@ describe('MatProgressSpinner', () => { expect(progressElement.componentInstance.strokeWidth).toBe(7); }); + it('should set `aria-valuenow` to the current value in determinate mode', () => { + const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); + const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); + fixture.componentInstance.mode = 'determinate'; + fixture.componentInstance.value = 37; + fixture.detectChanges(); + + expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37'); + }); + + it('should clear `aria-valuenow` in indeterminate mode', () => { + const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); + const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); + fixture.componentInstance.mode = 'determinate'; + fixture.componentInstance.value = 89; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(true); + + fixture.componentInstance.mode = 'indeterminate'; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false); + }); + }); diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index ce207dcb2e1..7de5215926f 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -114,7 +114,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` '[style.height.px]': 'diameter', '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null', '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null', - '[attr.aria-valuenow]': 'value', + '[attr.aria-valuenow]': 'mode === "determinate" ? value : null', '[attr.mode]': 'mode', }, inputs: ['color'],