fix(material-experimental/mdc-progress-spinner): fix aria-valuenow (#…

…22429)
angular · Apr 13, 2021 · 768534d · 768534d
1 parent 9b4c503
commit 768534d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -323,7 +323,7 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.value = 37;
     fixture.detectChanges();
 
-    expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('0.37');
+    expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37');
   });
 
   it('should clear `aria-valuenow` in indeterminate mode', () => {

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -95,8 +95,14 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
     removeClass: (className: string) => this._elementRef.nativeElement.classList.remove(className),
     removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
-    setAttribute: (name: string, value: string) =>
-      this._elementRef.nativeElement.setAttribute(name, value),
+    setAttribute: (name, value) => {
+      if (name !== 'aria-valuenow') {
+        // MDC deals with values between 0 and 1 but Angular Material deals with values between
+        // 0 and 100 so the aria-valuenow should be set through the attr binding in the host
+        // instead of by the MDC adapter
+        this._elementRef.nativeElement.setAttribute(name, value);
+      }
+    },
     getDeterminateCircleAttribute: (attributeName: string) =>
       this._determinateCircle.nativeElement.getAttribute(attributeName),
     setDeterminateCircleAttribute: (attributeName: string, value: string) =>