fix(progress-bar): clear aria-valuenow in indeterminate or query mode

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', () => {

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',