Skip to content

fix(mdProgressCircle) Fix aria labels based on mode. #640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 8, 2016
Merged

fix(mdProgressCircle) Fix aria labels based on mode. #640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions src/components/progress-circle/progress-circle.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Member

@jelbourn jelbourn Jun 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than using done, you can do the test like

it('should do a thing', async(() => {
  // do a bunch of stuff, some of which is async
}));

And it will magically know when its done.

Copy link
Member Author

@josephperrott josephperrott Jun 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, unchanged as we cannot use async while setInterval is used.

(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>')
Expand Down
33 changes: 26 additions & 7 deletions src/components/progress-circle/progress-circle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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'],
Expand Down