fix(material/progress-bar): Support ChromeVox (#22166)

* fix(material/progress-bar): Support ChromeVox

* refactor(material/progress-bar): wrap elements with aria-hidden div

* fix(material-experimental/mdc-progress-bar): Support ChromeVox #22165

* test(material/progress-bar): add ChromeVox support tests

* test(material-experimental/mdc-progress-bar): add ChromeVox support test

(cherry picked from commit 5b7b03e)

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

@@ -1,4 +1,8 @@
-<div class="mdc-linear-progress">
+<!--
+  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-linear-progress" aria-hidden="true">
   <div class="mdc-linear-progress__buffer">
     <div class="mdc-linear-progress__buffer-bar"></div>
     <div class="mdc-linear-progress__buffer-dots"></div>

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

@@ -17,6 +17,19 @@ describe('MDC-based MatProgressBar', () => {
     return TestBed.createComponent<T>(componentType);
   }
 
+  // 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.
+  it('should have elements wrapped in aria-hidden div', () => {
+    const fixture = createComponent(BasicProgressBar);
+    const host = fixture.nativeElement as Element;
+    const element = host.children[0];
+    expect(element.children.length).toBe(1);
+
+    const div = element.querySelector('div')!;
+    expect(div).toBeTruthy();
+    expect(div.getAttribute('aria-hidden')).toBe('true');
+  });
+
   describe('with animation', () => {
     describe('basic progress-bar', () => {
       it('should apply a mode of "determinate" if no mode is provided.', () => {

src/material/progress-bar/progress-bar.html

@@ -1,15 +1,21 @@
 <!--
-  The background div is named as such because it appears below the other divs and is not sized based
-  on values.
+  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 width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
-  <defs>
-    <pattern [id]="progressbarId" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
-      <circle cx="2" cy="2" r="2"/>
-    </pattern>
-  </defs>
-  <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
-</svg>
-<div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
-<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar></div>
-<div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>
+<div aria-hidden="true">
+  <svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
+    <defs>
+      <pattern [id]="progressbarId" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
+        <circle cx="2" cy="2" r="2"/>
+      </pattern>
+    </defs>
+    <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
+  </svg>
+  <!--
+    The background div is named as such because it appears below the other divs and is not sized based
+    on values.
+  -->
+  <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
+  <div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar></div>
+  <div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>
+</div>

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

@@ -25,6 +25,19 @@ describe('MatProgressBar', () => {
     return TestBed.createComponent<T>(componentType);
   }
 
+  // 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.
+  it('should have elements wrapped in aria-hidden div', () => {
+    const fixture = createComponent(BasicProgressBar);
+    const host = fixture.nativeElement as Element;
+    const element = host.children[0];
+    expect(element.children.length).toBe(1);
+
+    const div = element.querySelector('div')!;
+    expect(div).toBeTruthy();
+    expect(div.getAttribute('aria-hidden')).toBe('true');
+  });
+
   describe('with animation', () => {
     describe('basic progress-bar', () => {
       it('should apply a mode of "determinate" if no mode is provided.', () => {