Skip to content

Commit dd4257e

Browse files
crisbetojelbourn
authored andcommitted
fix(progress-spinner): clear aria-valuenow in indeterminate mode (#15052)
Clears the `aria-valuenow` attribute when the progress spinner is in indeterminate mode, [based on the a11y spec](https://www.w3.org/TR/wai-aria-1.1/#progressbar). Fixes #15018.
1 parent a88d053 commit dd4257e

File tree

2 files changed

+26
-1
lines changed

2 files changed

+26
-1
lines changed

src/lib/progress-spinner/progress-spinner.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,31 @@ describe('MatProgressSpinner', () => {
296296
expect(progressElement.componentInstance.strokeWidth).toBe(7);
297297
});
298298

299+
it('should set `aria-valuenow` to the current value in determinate mode', () => {
300+
const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
301+
const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'));
302+
fixture.componentInstance.mode = 'determinate';
303+
fixture.componentInstance.value = 37;
304+
fixture.detectChanges();
305+
306+
expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37');
307+
});
308+
309+
it('should clear `aria-valuenow` in indeterminate mode', () => {
310+
const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
311+
const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'));
312+
fixture.componentInstance.mode = 'determinate';
313+
fixture.componentInstance.value = 89;
314+
fixture.detectChanges();
315+
316+
expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(true);
317+
318+
fixture.componentInstance.mode = 'indeterminate';
319+
fixture.detectChanges();
320+
321+
expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
322+
});
323+
299324
});
300325

301326

src/lib/progress-spinner/progress-spinner.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
114114
'[style.height.px]': 'diameter',
115115
'[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
116116
'[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
117-
'[attr.aria-valuenow]': 'value',
117+
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
118118
'[attr.mode]': 'mode',
119119
},
120120
inputs: ['color'],

0 commit comments

Comments
 (0)