fix(checkbox): clear tabindex from host element (#13308)

Currently we forward the tabindex from the host element to the underlying input, however we leave behind the tabindex on the host, which means that consumers can end up with two layers of focusable elements.

Author: crisbeto

src/lib/checkbox/checkbox.spec.ts

@@ -784,6 +784,14 @@ describe('MatCheckbox', () => {
       expect(checkbox.tabIndex)
         .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
     }));
+
+    it('should clear the tabindex attribute from the host element', () => {
+      fixture = createComponent(CheckboxWithTabindexAttr);
+      fixture.detectChanges();
+
+      const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).nativeElement;
+      expect(checkbox.getAttribute('tabindex')).toBeFalsy();
+    });
   });
 
   describe('using ViewChild', () => {

src/lib/checkbox/checkbox.ts

@@ -119,6 +119,7 @@ export const _MatCheckboxMixinBase:
   host: {
     'class': 'mat-checkbox',
     '[id]': 'id',
+    '[attr.tabindex]': 'null',
     '[class.mat-checkbox-indeterminate]': 'indeterminate',
     '[class.mat-checkbox-checked]': 'checked',
     '[class.mat-checkbox-disabled]': 'disabled',