fix(progress-bar): prevent users from tabbing into underlying SVG on …

…IE (#9638)

Fixes users being able to tab into the SVG element inside the progress bar on IE where all SVGs are focusable by default.

src/lib/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="5" class="mat-progress-bar-background mat-progress-bar-element">
+<svg width="100%" height="5" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
   <defs>
     <pattern [id]="progressbarId" x="5" y="0" width="10" height="5" patternUnits="userSpaceOnUse">
       <circle cx="2.5" cy="2.5" r="2.5"/>

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

@@ -87,6 +87,11 @@ describe('MatProgressBar', () => {
       expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.6)'});
       expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.6)'});
     });
+
+    it('should not be able to tab into the underlying SVG element', () => {
+      const svg = fixture.debugElement.query(By.css('svg')).nativeElement;
+      expect(svg.getAttribute('focusable')).toBe('false');
+    });
   });
 
   describe('buffer progress-bar', () => {