From dd4257eacabcc4287615d3942e295321d8253c84 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 22 Feb 2019 16:06:24 +0100 Subject: [PATCH] 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. --- .../progress-spinner/progress-spinner.spec.ts | 25 +++++++++++++++++++ src/lib/progress-spinner/progress-spinner.ts | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index 0f6aa23a362..dc0dcaa212c 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/src/lib/progress-spinner/progress-spinner.spec.ts @@ -296,6 +296,31 @@ describe('MatProgressSpinner', () => { expect(progressElement.componentInstance.strokeWidth).toBe(7); }); + it('should set `aria-valuenow` to the current value in determinate mode', () => { + const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); + const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); + fixture.componentInstance.mode = 'determinate'; + fixture.componentInstance.value = 37; + fixture.detectChanges(); + + expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37'); + }); + + it('should clear `aria-valuenow` in indeterminate mode', () => { + const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); + const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); + fixture.componentInstance.mode = 'determinate'; + fixture.componentInstance.value = 89; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(true); + + fixture.componentInstance.mode = 'indeterminate'; + fixture.detectChanges(); + + expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false); + }); + }); diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index ce207dcb2e1..7de5215926f 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -114,7 +114,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` '[style.height.px]': 'diameter', '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null', '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null', - '[attr.aria-valuenow]': 'value', + '[attr.aria-valuenow]': 'mode === "determinate" ? value : null', '[attr.mode]': 'mode', }, inputs: ['color'],