fixup! fix(material/progress-bar): add accessible label for screen readers

Author: annieyw

src/dev-app/progress-bar/progress-bar-demo.html

@@ -36,8 +36,10 @@ <h1>Buffer</h1>
 
 <div class="demo-progress-bar-container">
   <mat-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
-                   [color]="color" (animationEnd)="bufferAnimationEndValue = $event.value">
+                   [color]="color" (animationEnd)="bufferAnimationEndValue = $event.value" [attr.aria-label]="label">
   </mat-progress-bar>
+  <button (click)="changeAriaLabel('new label')">change</button>
+  <button (click)="changeAriaLabel()">clear</button>
 </div>
 
 <h1>Indeterminate</h1>

src/dev-app/progress-bar/progress-bar-demo.ts

@@ -24,6 +24,7 @@ export class ProgressBarDemo {
   bufferAnimationEndValue: number;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
+  label?: string = 'old label';
 
   stepDeterminateProgressVal(val: number) {
     this.determinateProgressValue = this._clampValue(val + this.determinateProgressValue);
@@ -37,6 +38,10 @@ export class ProgressBarDemo {
     this.bufferBufferValue = this._clampValue(val + this.bufferBufferValue);
   }
 
+  changeAriaLabel(value?: string) {
+    this.label = value;
+  }
+
   private _clampValue(value: number) {
     return Math.max(0, Math.min(100, value));
   }

src/material/progress-bar/progress-bar.html

@@ -11,7 +11,8 @@
   <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
 </svg>
 <div class="mat-progress-bar-accessible-label cdk-visually-hidden">
-  {{this.ariaLabel}}{{(this.mode === "indeterminate" || this.mode === "query") ? ' ' : value + '%'}}
+  <span class="mat-progress-bar-accessible-label__label"></span>
+  <span>{{(this.mode === "indeterminate" || this.mode === "query") ? null : value + '%'}}</span>
 </div>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
 <div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar></div>

src/material/progress-bar/progress-bar.spec.ts

@@ -278,7 +278,7 @@ describe('MatProgressBar', () => {
 
 });
 
-@Component({template: '<mat-progress-bar [aria-label]="demoAriaLabel"></mat-progress-bar>'})
+@Component({template: '<mat-progress-bar [attr.aria-label]="demoAriaLabel"></mat-progress-bar>'})
 class BasicProgressBar {
   demoAriaLabel = '';
 }

src/material/progress-bar/progress-bar.ts

@@ -9,7 +9,7 @@ import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 import {DOCUMENT} from '@angular/common';
 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -26,8 +26,8 @@ import {
 } from '@angular/core';
 import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {fromEvent, Observable, Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
+import {fromEvent, Observable, Subject, Subscription} from 'rxjs';
+import {filter, takeUntil} from 'rxjs/operators';
 
 
 // TODO(josephperrott): Benchpress tests.
@@ -82,6 +82,18 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
 /** Counter used to generate unique IDs for progress bars. */
 let progressbarId = 0;
 
+
+function readAriaValues(element: HTMLElement): Observable<string> {
+  const config = {attributeFilter: ['aria-label']};
+  return new Observable((observer) => {
+    const mutation = new MutationObserver((mutations) => {
+      const newLabel = (mutations[0].target as HTMLElement).getAttribute('aria-label') ?? '';
+      observer.next(newLabel);
+    });
+    mutation.observe(element, config);
+  });
+}
+
 /**
  * `<mat-progress-bar>` component.
  */
@@ -92,7 +104,6 @@ let progressbarId = 0;
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
-    '[attr.aria-label]': 'ariaLabel',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-progress-bar',
@@ -125,14 +136,22 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
     const path = location ? location.getPathname().split('#')[0] : '';
     this._rectangleFillValue = `url('${path}#${this.progressbarId}')`;
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
+    const mutationObservable = readAriaValues(_elementRef.nativeElement);
+
+    mutationObservable.pipe(takeUntil(this._destroyed)).subscribe((label) => {
+      console.log(label, this.value);
+      const accessibleLabel = (_elementRef.nativeElement as HTMLElement)
+        .getElementsByClassName('mat-progress-bar-accessible-label__label')![0];
+      accessibleLabel.innerHTML = label;
+    });
   }
 
+  /** Subject that emits when the component has been destroyed. */
+  protected _destroyed = new Subject<void>();
+
   /** Flag that indicates whether NoopAnimations mode is set to true. */
   _isNoopAnimation = false;
 
-  /** aria-label of progress bar to be set on the host. */
-  @Input('aria-label') ariaLabel: string = '';
-
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
   get value(): number { return this._value; }
@@ -213,6 +232,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
 
   ngOnDestroy() {
     this._animationEndSubscription.unsubscribe();
+
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   static ngAcceptInputType_value: NumberInput;