fix(checkbox): remove checkmark from tab order

Prevents users from being able to tab into the underlying SVG checkmark on IE. Fixes #6125.
angular · Jul 31, 2017 · 452524c · 452524c
1 parent e79f7f9
commit 452524c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
@@ -22,6 +22,7 @@
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">
       <svg version="1.1"
+           focusable="false"
            class="mat-checkbox-checkmark"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"

diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
@@ -404,6 +404,10 @@ describe('MdCheckbox', () => {
           .toBe(0, 'Expected no ripple after element is blurred.');
     }));
 
+    it('should remove the SVG checkmark from the tab order', () => {
+      expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false');
+    });
+
     describe('ripple elements', () => {
 
       it('should show ripples on label mousedown', () => {