Skip to content

Commit 2da7135

Browse files
authored
fix(material/progress-spinner): resolve accessibility issue in ChromeVox (angular#22219)
Along the same lines as angular#22166. Marks all the root nodes in the progress spinner as `aria-hidden` in order to work around an issue in ChromeVox.
1 parent 9b67d67 commit 2da7135

File tree

4 files changed

+35
-4
lines changed

4 files changed

+35
-4
lines changed

src/material-experimental/mdc-progress-spinner/progress-spinner.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99
</svg>
1010
</ng-template>
1111

12-
<div class="mdc-circular-progress__determinate-container" #determinateSpinner>
12+
<!--
13+
All children need to be hidden for screen readers in order to support ChromeVox.
14+
More context in the issue: https://github.com/angular/components/issues/22165.
15+
-->
16+
<div class="mdc-circular-progress__determinate-container" aria-hidden="true" #determinateSpinner>
1317
<svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
1418
xmlns="http://www.w3.org/2000/svg" focusable="false">
1519
<circle [attr.r]="_circleRadius()"
@@ -21,7 +25,7 @@
2125
</svg>
2226
</div>
2327
<!--TODO: figure out why there are 3 separate svgs-->
24-
<div class="mdc-circular-progress__indeterminate-container">
28+
<div class="mdc-circular-progress__indeterminate-container" aria-hidden="true">
2529
<div class="mdc-circular-progress__spinner-layer">
2630
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
2731
<ng-container [ngTemplateOutlet]="circle"></ng-container>

src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts

+12
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,18 @@ describe('MDC-based MatProgressSpinner', () => {
340340

341341
expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
342342
});
343+
344+
it('should apply aria-hidden to child nodes', () => {
345+
const fixture = TestBed.createComponent(BasicProgressSpinner);
346+
fixture.detectChanges();
347+
348+
const progressElement = fixture.nativeElement.querySelector('mat-progress-spinner');
349+
const children = Array.from<HTMLElement>(progressElement.children);
350+
351+
expect(children.length).toBeGreaterThan(0);
352+
expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
353+
});
354+
343355
});
344356

345357

src/material/progress-spinner/progress-spinner.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@
44
element containing the SVG. `focusable="false"` prevents IE from allowing the user to
55
tab into the SVG element.
66
-->
7-
7+
<!--
8+
All children need to be hidden for screen readers in order to support ChromeVox.
9+
More context in the issue: https://github.com/angular/components/issues/22165.
10+
-->
811
<svg
912
[style.width.px]="diameter"
1013
[style.height.px]="diameter"
1114
[attr.viewBox]="_getViewBox()"
1215
preserveAspectRatio="xMidYMid meet"
1316
focusable="false"
14-
[ngSwitch]="mode === 'indeterminate'">
17+
[ngSwitch]="mode === 'indeterminate'"
18+
aria-hidden="true">
1519

1620
<!--
1721
Technically we can reuse the same `circle` element, however Safari has an issue that breaks

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

+11
Original file line numberDiff line numberDiff line change
@@ -483,6 +483,17 @@ describe('MatProgressSpinner', () => {
483483
expect(shadowRoot.querySelector('style[mat-spinner-animation="27"]')).toBeTruthy();
484484
});
485485

486+
it('should apply aria-hidden to child nodes', () => {
487+
const fixture = TestBed.createComponent(BasicProgressSpinner);
488+
fixture.detectChanges();
489+
490+
const progressElement = fixture.nativeElement.querySelector('mat-progress-spinner');
491+
const children = Array.from<HTMLElement>(progressElement.children);
492+
493+
expect(children.length).toBeGreaterThan(0);
494+
expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
495+
});
496+
486497
});
487498

488499

0 commit comments

Comments
 (0)