From 05ab086b64d369c50121f52b047d0b3a9db9a687 Mon Sep 17 00:00:00 2001
From: jamOne- <dominikrabij@google.com>
Date: Tue, 9 Mar 2021 19:38:39 +0100
Subject: [PATCH 1/5] fix(material/progress-bar): Support ChromeVox

---
 src/material/progress-bar/progress-bar.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/material/progress-bar/progress-bar.html b/src/material/progress-bar/progress-bar.html
index 8d394133c4b3..d46538cdc608 100644
--- a/src/material/progress-bar/progress-bar.html
+++ b/src/material/progress-bar/progress-bar.html
@@ -2,7 +2,7 @@
   The background div is named as such because it appears below the other divs and is not sized based
   on values.
 -->
-<svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
+<svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element" aria-hidden="true">
   <defs>
     <pattern [id]="progressbarId" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
       <circle cx="2" cy="2" r="2"/>
@@ -10,6 +10,6 @@
   </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 class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()" aria-hidden="true"></div>
+<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar aria-hidden="true"></div>
+<div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element" aria-hidden="true"></div>

From 6d5b053da6893785324c27debbd01f37b6a460cb Mon Sep 17 00:00:00 2001
From: jamOne- <dominikrabij@google.com>
Date: Wed, 10 Mar 2021 08:01:51 +0100
Subject: [PATCH 2/5] refactor(material/progress-bar): wrap elements with
 aria-hidden div

---
 src/material/progress-bar/progress-bar.html | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/material/progress-bar/progress-bar.html b/src/material/progress-bar/progress-bar.html
index d46538cdc608..858ec3b958bf 100644
--- a/src/material/progress-bar/progress-bar.html
+++ b/src/material/progress-bar/progress-bar.html
@@ -2,14 +2,16 @@
   The background div is named as such because it appears below the other divs and is not sized based
   on values.
 -->
-<svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element" aria-hidden="true">
-  <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()" aria-hidden="true"></div>
-<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar aria-hidden="true"></div>
-<div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element" aria-hidden="true"></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>
+  <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>

From 0844d64e93a5a386f998b50b2e8ca4821d6ffe84 Mon Sep 17 00:00:00 2001
From: jamOne- <dominikrabij@google.com>
Date: Wed, 10 Mar 2021 08:03:06 +0100
Subject: [PATCH 3/5] fix(material-experimental/mdc-progress-bar): Support
 ChromeVox #22165

---
 src/material-experimental/mdc-progress-bar/progress-bar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.html b/src/material-experimental/mdc-progress-bar/progress-bar.html
index 148f6b5b0edd..fcdd73c546ac 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.html
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.html
@@ -1,4 +1,4 @@
-<div class="mdc-linear-progress">
+<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>

From af8101e3815bc0dc49a0006375bb21d2c1bd77bd Mon Sep 17 00:00:00 2001
From: jamOne- <dominikrabij@google.com>
Date: Wed, 10 Mar 2021 18:27:50 +0100
Subject: [PATCH 4/5] test(material/progress-bar): add ChromeVox support tests

---
 src/material/progress-bar/progress-bar.html    |  8 ++++++--
 src/material/progress-bar/progress-bar.spec.ts | 13 +++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/material/progress-bar/progress-bar.html b/src/material/progress-bar/progress-bar.html
index 858ec3b958bf..c546ed2712f8 100644
--- a/src/material/progress-bar/progress-bar.html
+++ b/src/material/progress-bar/progress-bar.html
@@ -1,6 +1,6 @@
 <!--
-  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.
 -->
 <div aria-hidden="true">
   <svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
@@ -11,6 +11,10 @@
     </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>
diff --git a/src/material/progress-bar/progress-bar.spec.ts b/src/material/progress-bar/progress-bar.spec.ts
index f6ede897d157..c792a678607e 100644
--- a/src/material/progress-bar/progress-bar.spec.ts
+++ b/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.', () => {

From 9d67cc9585206f7d64f446510fb1c5eab1684a13 Mon Sep 17 00:00:00 2001
From: jamOne- <dominikrabij@google.com>
Date: Wed, 10 Mar 2021 18:28:36 +0100
Subject: [PATCH 5/5] test(material-experimental/mdc-progress-bar): add
 ChromeVox support test

---
 .../mdc-progress-bar/progress-bar.html              |  4 ++++
 .../mdc-progress-bar/progress-bar.spec.ts           | 13 +++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.html b/src/material-experimental/mdc-progress-bar/progress-bar.html
index fcdd73c546ac..a1ba9b03daf6 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.html
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.html
@@ -1,3 +1,7 @@
+<!--
+  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>
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts b/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts
index 699fb37dee69..31d3fecc10c0 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts
+++ b/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.', () => {