fix(material/progress-spinner): resolve accessibility issue in Chrome…

…Vox (#22219)

Along the same lines as #22166. Marks all the root nodes in the progress spinner as
`aria-hidden` in order to work around an issue in ChromeVox.

(cherry picked from commit 2da7135)

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

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

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

@@ -340,6 +340,18 @@ describe('MDC-based MatProgressSpinner', () => {
 
     expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
   });
+
+  it('should apply aria-hidden to child nodes', () => {
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.nativeElement.querySelector('mat-progress-spinner');
+    const children = Array.from<HTMLElement>(progressElement.children);
+
+    expect(children.length).toBeGreaterThan(0);
+    expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
+  });
+
 });
 
 

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

@@ -4,14 +4,18 @@
   element containing the SVG. `focusable="false"` prevents IE from allowing the user to
   tab into the SVG element.
 -->
-
+<!--
+  All children need to be hidden for screen readers in order to support ChromeVox.
+  More context in the issue: https://github.com/angular/components/issues/22165.
+-->
 <svg
   [style.width.px]="diameter"
   [style.height.px]="diameter"
   [attr.viewBox]="_getViewBox()"
   preserveAspectRatio="xMidYMid meet"
   focusable="false"
-  [ngSwitch]="mode === 'indeterminate'">
+  [ngSwitch]="mode === 'indeterminate'"
+  aria-hidden="true">
 
   <!--
     Technically we can reuse the same `circle` element, however Safari has an issue that breaks

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

@@ -483,6 +483,17 @@ describe('MatProgressSpinner', () => {
       expect(shadowRoot.querySelector('style[mat-spinner-animation="27"]')).toBeTruthy();
     });
 
+  it('should apply aria-hidden to child nodes', () => {
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.nativeElement.querySelector('mat-progress-spinner');
+    const children = Array.from<HTMLElement>(progressElement.children);
+
+    expect(children.length).toBeGreaterThan(0);
+    expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
+  });
+
 });