From a88d0533959e55c1994834f8f0297c55b16b9ebc Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 22 Feb 2019 16:06:07 +0100
Subject: [PATCH] fix(progress-bar): clear aria-valuenow in indeterminate or
 query mode (#15019)

Clears the `aria-valuenow` attribute when the progress bar is in indeterminate or query mode, [based on the a11y spec](https://www.w3.org/TR/wai-aria-1.1/#progressbar).

Fixes #15016.
---
 src/lib/progress-bar/progress-bar.spec.ts | 43 +++++++++++++++++++++++
 src/lib/progress-bar/progress-bar.ts      |  4 +--
 2 files changed, 45 insertions(+), 2 deletions(-)

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