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

Author: annieyw

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

@@ -50,6 +50,7 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    'tabindex': '-1',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-mdc-progress-bar',

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

@@ -58,6 +58,7 @@ const BASE_STROKE_WIDTH = 10;
   host: {
     'role': 'progressbar',
     'class': 'mat-mdc-progress-spinner mdc-circular-progress',
+    'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',

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

@@ -92,6 +92,7 @@ let progressbarId = 0;
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    'tabindex': '-1',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-progress-bar',

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

@@ -109,6 +109,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
   host: {
     'role': 'progressbar',
     'class': 'mat-progress-spinner',
+    'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',