From 235f664eed5477bc40bd0ae28b8730c0cd11816d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 1 Aug 2017 23:21:26 +0200
Subject: [PATCH] fix(progress-spinner): prevent users from tabbing into
 underlying SVG on IE (#6142)

Since IE makes SVGs focusable by default, we need to disable it manually in order to prevent users from tabbing into it accidentally.

Relates to #6125.
---
 src/lib/progress-spinner/progress-spinner.html    | 6 ++++--
 src/lib/progress-spinner/progress-spinner.spec.ts | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/progress-spinner/progress-spinner.html b/src/lib/progress-spinner/progress-spinner.html
index 2152d95f7b3..3379dc08262 100644
--- a/src/lib/progress-spinner/progress-spinner.html
+++ b/src/lib/progress-spinner/progress-spinner.html
@@ -1,9 +1,11 @@
 <!--
   preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's
   center. The center of the circle will remain at the center of the md-progress-spinner
-  element containing the SVG.
+  element containing the SVG. `focusable="false"` prevents IE from allowing the user to
+  tab into the SVG element.
 -->
 <svg viewBox="0 0 100 100"
-     preserveAspectRatio="xMidYMid meet">
+     preserveAspectRatio="xMidYMid meet"
+     focusable="false">
   <path #path [style.strokeWidth]="strokeWidth"></path>
 </svg>
diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts
index c23ba1bde66..fc8efd45a37 100644
--- a/src/lib/progress-spinner/progress-spinner.spec.ts
+++ b/src/lib/progress-spinner/progress-spinner.spec.ts
@@ -178,6 +178,14 @@ describe('MdProgressSpinner', () => {
         .toBe(oldDimesions, 'Expected circle dimensions to have changed.');
   });
 
+  it('should remove the underlying SVG element from the tab order explicitly', () => {
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('svg').getAttribute('focusable')).toBe('false');
+  });
+
 });