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.
This commit is contained in:
Kristiyan Kostadinov
2017-08-01 23:21:26 +02:00
committed by tinayuangao
parent f5dc120fd7
commit 235f664eed
2 changed files with 12 additions and 2 deletions
@@ -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>

Before

Width:  |  Height:  |  Size: 344 B

After

Width:  |  Height:  |  Size: 453 B

@@ -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');
});
});