fix(spinner): omit min/max/value for indeterminate and correctly set mode (#640)

Set initial value of mdProgressCircle as undefined, set value as undefined when mode is set to indeterminate.

Author: josephperrott

src/components/progress-circle/progress-circle.spec.ts

@@ -42,18 +42,36 @@ describe('MdProgressCircular', () => {
       });
   });
 
-  it('should define a default value for the value attribute', (done: () => void) => {
+  it('should define a default value of undefined for the value attribute', (done: () => void) => {
     builder
       .overrideTemplate(TestApp, '<md-progress-circle></md-progress-circle>')
       .createAsync(TestApp)
       .then((fixture) => {
         fixture.detectChanges();
         let progressElement = getChildDebugElement(fixture.debugElement, 'md-progress-circle');
-        expect(progressElement.componentInstance.value).toBe(0);
+        expect(progressElement.componentInstance.value).toBeUndefined();
         done();
       });
   });
 
+  it('should set the value to undefined when the mode is set to indeterminate',
+    (done: () => void) => {
+      builder
+        .overrideTemplate(TestApp, `<md-progress-circle value="50"
+                                                        [mode]="mode"></md-progress-circle>`)
+        .createAsync(TestApp)
+        .then((fixture) => {
+          let progressElement = getChildDebugElement(fixture.debugElement, 'md-progress-circle');
+          fixture.debugElement.componentInstance.mode = 'determinate';
+          fixture.detectChanges();
+          expect(progressElement.componentInstance.value).toBe(50);
+          fixture.debugElement.componentInstance.mode = 'indeterminate';
+          fixture.detectChanges();
+          expect(progressElement.componentInstance.value).toBe(undefined);
+          done();
+        });
+  });
+
   it('should clamp the value of the progress between 0 and 100', (done: () => void) => {
     builder
       .overrideTemplate(TestApp, '<md-progress-circle></md-progress-circle>')

src/components/progress-circle/progress-circle.ts

@@ -35,8 +35,8 @@ type EasingFn = (currentTime: number, startValue: number,
   selector: 'md-progress-circle',
   host: {
     'role': 'progressbar',
-    'aria-valuemin': '0',
-    'aria-valuemax': '100',
+    '[attr.aria-valuemin]': 'ariaValueMin',
+    '[attr.aria-valuemax]': 'ariaValueMax',
   },
   templateUrl: 'progress-circle.html',
   styleUrls: ['progress-circle.css'],
@@ -49,6 +49,22 @@ export class MdProgressCircle implements OnDestroy {
   /** The id of the indeterminate interval. */
   private _interdeterminateInterval: number;
 
+  /**
+   * Values for aria max and min are only defined as numbers when in a determinate mode.  We do this
+   * because voiceover does not report the progress indicator as indeterminate if the aria min
+   * and/or max value are number values.
+   *
+   * @internal
+   */
+  get ariaValueMin() {
+    return this.mode == 'determinate' ? 0 : null;
+  }
+
+  /** @internal */
+  get ariaValueMax() {
+    return this.mode == 'determinate' ? 100 : null;
+  }
+
   /** @internal */
   get interdeterminateInterval() {
     return this._interdeterminateInterval;
@@ -79,19 +95,21 @@ export class MdProgressCircle implements OnDestroy {
   /**
    * Value of the progress circle.
    *
-   * Input:number, defaults to 0.
+   * Input:number
    * _value is bound to the host as the attribute aria-valuenow.
    */
-  private _value: number = 0;
+  private _value: number;
   @Input()
   @HostBinding('attr.aria-valuenow')
   get value() {
-    return this._value;
+    if (this.mode == 'determinate') {
+      return this._value;
+    }
   }
   set value(v: number) {
-    if (v) {
+    if (v && this.mode == 'determinate') {
       let newValue = clamp(v);
-      this._animateCircle(this.value, newValue, linearEase, DURATION_DETERMINATE, 0);
+      this._animateCircle((this.value || 0), newValue, linearEase, DURATION_DETERMINATE, 0);
       this._value = newValue;
     }
   }
@@ -206,6 +224,7 @@ export class MdProgressCircle implements OnDestroy {
   selector: 'md-spinner',
   host: {
     'role': 'progressbar',
+    'mode': 'indeterminate',
   },
   templateUrl: 'progress-circle.html',
   styleUrls: ['progress-circle.css'],