From a9cdb084d31b59b2b832150affb23b6c08eba486 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Fri, 2 Apr 2021 00:02:58 -0700
Subject: [PATCH] fix(material/progress-bar): fix screenreader not reading
 aria-label (#22201)

* fix(material/progress-spinner): fix screenreader not reading out aria-label

* fixup! fix(material/progress-spinner): fix screenreader not reading out aria-label
---
 src/material-experimental/mdc-progress-bar/progress-bar.ts     | 3 +++
 .../mdc-progress-spinner/progress-spinner.ts                   | 3 +++
 src/material/progress-bar/progress-bar.ts                      | 3 +++
 src/material/progress-spinner/progress-spinner.ts              | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.ts b/src/material-experimental/mdc-progress-bar/progress-bar.ts
index 619a52f0d384..8d3aafa00666 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.ts
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.ts
@@ -50,6 +50,9 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    // set tab index to -1 so screen readers will read the aria-label
+    // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+    'tabindex': '-1',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-mdc-progress-bar',
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index bb91bb756d98..f1d4e7afe586 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -58,6 +58,9 @@ const BASE_STROKE_WIDTH = 10;
   host: {
     'role': 'progressbar',
     'class': 'mat-mdc-progress-spinner mdc-circular-progress',
+    // set tab index to -1 so screen readers will read the aria-label
+    // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+    'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
index a402e47ac2a0..dbe7e4059fac 100644
--- a/src/material/progress-bar/progress-bar.ts
+++ b/src/material/progress-bar/progress-bar.ts
@@ -92,6 +92,9 @@ let progressbarId = 0;
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    // set tab index to -1 so screen readers will read the aria-label
+    // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+    'tabindex': '-1',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-progress-bar',
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index a4b1b482f89c..5aa26cb94932 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/src/material/progress-spinner/progress-spinner.ts
@@ -109,6 +109,9 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
   host: {
     'role': 'progressbar',
     'class': 'mat-progress-spinner',
+    // set tab index to -1 so screen readers will read the aria-label
+    // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+    'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',