Skip to content

Commit a058afc

Browse files
committed
fix(progress-bar): clear aria-valuenow in indeterminate or query mode
Clears the `aria-valuenow` attribute when the progress bar is in indeterminate or query mode, [based on the a11y spec](https://www.w3.org/TR/wai-aria-1.1/#progressbar). Fixes #15016.
1 parent 64010d7 commit a058afc

File tree

2 files changed

+41
-2
lines changed

2 files changed

+41
-2
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,45 @@ describe('MatProgressBar', () => {
141141

142142
expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/another-fake-path#.*['"]?\)$/);
143143
});
144+
145+
it('should remove the `aria-valuenow` attribute in indeterminate mode', () => {
146+
const fixture = createComponent(BasicProgressBar);
147+
fixture.detectChanges();
148+
149+
const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
150+
const progressComponent = progressElement.componentInstance;
151+
152+
progressComponent.mode = 'determinate';
153+
progressComponent.value = 50;
154+
fixture.detectChanges();
155+
156+
expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('50');
157+
158+
progressComponent.mode = 'indeterminate';
159+
fixture.detectChanges();
160+
161+
expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
162+
});
163+
164+
it('should remove the `aria-valuenow` attribute in query mode', () => {
165+
const fixture = createComponent(BasicProgressBar);
166+
fixture.detectChanges();
167+
168+
const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
169+
const progressComponent = progressElement.componentInstance;
170+
171+
progressComponent.mode = 'determinate';
172+
progressComponent.value = 50;
173+
fixture.detectChanges();
174+
175+
expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('50');
176+
177+
progressComponent.mode = 'query';
178+
fixture.detectChanges();
179+
180+
expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
181+
});
182+
144183
});
145184

146185
describe('animation trigger on determinate setting', () => {

src/lib/progress-bar/progress-bar.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,10 @@ let progressbarId = 0;
9090
'role': 'progressbar',
9191
'aria-valuemin': '0',
9292
'aria-valuemax': '100',
93-
'[attr.aria-valuenow]': 'value',
93+
'[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
9494
'[attr.mode]': 'mode',
9595
'class': 'mat-progress-bar',
96-
'[class._mat-animation-noopable]': `_isNoopAnimation`,
96+
'[class._mat-animation-noopable]': '_isNoopAnimation',
9797
},
9898
inputs: ['color'],
9999
templateUrl: 'progress-bar.html',

0 commit comments

Comments
 (0)