diff --git a/src/lib/progress-bar/progress-bar.spec.ts b/src/lib/progress-bar/progress-bar.spec.ts index ffedf948a5b..85586b5e656 100644 --- a/src/lib/progress-bar/progress-bar.spec.ts +++ b/src/lib/progress-bar/progress-bar.spec.ts @@ -141,6 +141,49 @@ describe('MatProgressBar', () => { expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/another-fake-path#.*['"]?\)$/); }); + + it('should remove the `aria-valuenow` attribute in indeterminate mode', () => { + const fixture = createComponent(BasicProgressBar); + fixture.detectChanges(); + + const progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); + const progressComponent = progressElement.componentInstance; + + progressComponent.mode = 'determinate'; + progressComponent.value = 50; + fixture.detectChanges(); + + expect(progressElement.nativeElement.getAttribute('aria-valuenow')) + .toBe('50', 'Expected aria-valuenow to be set in determinate mode.'); + + progressComponent.mode = 'indeterminate'; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')) + .toBe(false, 'Expect aria-valuenow to be cleared in indeterminate mode.'); + }); + + it('should remove the `aria-valuenow` attribute in query mode', () => { + const fixture = createComponent(BasicProgressBar); + fixture.detectChanges(); + + const progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); + const progressComponent = progressElement.componentInstance; + + progressComponent.mode = 'determinate'; + progressComponent.value = 50; + fixture.detectChanges(); + + expect(progressElement.nativeElement.getAttribute('aria-valuenow')) + .toBe('50', 'Expected aria-valuenow to be set in determinate mode.'); + + progressComponent.mode = 'query'; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')) + .toBe(false, 'Expect aria-valuenow to be cleared in query mode.'); + }); + }); describe('animation trigger on determinate setting', () => { diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index c3af743d98b..239c154e27d 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -90,10 +90,10 @@ let progressbarId = 0; 'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', - '[attr.aria-valuenow]': 'value', + '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value', '[attr.mode]': 'mode', 'class': 'mat-progress-bar', - '[class._mat-animation-noopable]': `_isNoopAnimation`, + '[class._mat-animation-noopable]': '_isNoopAnimation', }, inputs: ['color'], templateUrl: 'progress-bar.html',