fix(datepicker): remove toggle icon from tab order on IE (#6405)

Fixes users being able to tab into the datepicker's icon on IE.
angular · Aug 15, 2017 · ea17d3d · ea17d3d
1 parent c668075
commit ea17d3d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
@@ -2,7 +2,7 @@
         [disabled]="disabled" (click)="_open($event)">
   <md-icon>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
-         fill="currentColor" style="vertical-align: top">
+         fill="currentColor" style="vertical-align: top" focusable="false">
       <path d="M0 0h24v24H0z" fill="none"/>
       <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
     </svg>

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -541,6 +541,11 @@ describe('MdDatepicker', () => {
         expect(toggle.getAttribute('type')).toBe('button');
       });
 
+      it('should remove the underlying SVG icon from the tab order', () => {
+        const icon = fixture.debugElement.nativeElement.querySelector('svg');
+        expect(icon.getAttribute('focusable')).toBe('false');
+      });
+
       it('should restore focus to the toggle after the calendar is closed', () => {
         let toggle = fixture.debugElement.query(By.css('button')).nativeElement;