fix(checkbox): support native tabindex attribute

Currently the checkbox only allows changing the tabIndex using the tabIndex binding. Using the native tabindex attribute doesn't have any affect. With this change the native tabindex property will be respected.

References #6465

Author: devversion

src/lib/checkbox/checkbox.spec.ts

@@ -33,6 +33,7 @@ describe('MdCheckbox', () => {
         CheckboxWithChangeEvent,
         CheckboxWithFormControl,
         CheckboxWithoutLabel,
+        CheckboxWithTabindexAttr,
       ],
       providers: [
         {provide: ViewportRuler, useClass: FakeViewportRuler}
@@ -677,6 +678,20 @@ describe('MdCheckbox', () => {
 
   });
 
+  describe('with native tabindex attribute', () => {
+
+    it('should properly detect native tabindex attribute', async(() => {
+      fixture = TestBed.createComponent(CheckboxWithTabindexAttr);
+      fixture.detectChanges();
+
+      const checkbox = fixture.debugElement
+        .query(By.directive(MdCheckbox)).componentInstance as MdCheckbox;
+
+      expect(checkbox.tabIndex)
+        .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
+    }));
+  });
+
   describe('with multiple checkboxes', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(MultipleCheckboxes);
@@ -998,3 +1013,9 @@ class CheckboxWithFormControl {
 class CheckboxWithoutLabel {
   label: string;
 }
+
+/** Test component with the native tabindex attribute. */
+@Component({
+  template: `<md-checkbox tabindex="5"></md-checkbox>`
+})
+class CheckboxWithTabindexAttr {}

src/lib/checkbox/checkbox.ts

@@ -9,6 +9,7 @@
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterViewInit,
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -27,10 +28,12 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
+  HasTabIndex,
   MdRipple,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
+  mixinTabIndex,
   RippleRef,
 } from '@angular/material/core';
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
@@ -79,7 +82,7 @@ export class MdCheckboxBase {
   constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
 }
 export const _MdCheckboxMixinBase =
-  mixinColor(mixinDisableRipple(mixinDisabled(MdCheckboxBase)), 'accent');
+  mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MdCheckboxBase)), 'accent'));
 
 
 /**
@@ -104,13 +107,13 @@ export const _MdCheckboxMixinBase =
     '[class.mat-checkbox-label-before]': 'labelPosition == "before"',
   },
   providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
-  inputs: ['disabled', 'disableRipple', 'color'],
+  inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAccessor, AfterViewInit,
-    OnDestroy, CanColor, CanDisable, CanDisableRipple {
+    OnDestroy, CanColor, CanDisable, CanDisableRipple, HasTabIndex {
 
   /**
    * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
@@ -156,9 +159,6 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce
   /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
   @Input() labelPosition: 'before' | 'after' = 'after';
 
-  /** Tabindex value that is passed to the underlying input element. */
-  @Input() tabIndex: number = 0;
-
   /** Name value will be applied to the input element if present */
   @Input() name: string | null = null;
 
@@ -199,8 +199,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _focusMonitor: FocusMonitor) {
+              private _focusMonitor: FocusMonitor,
+              @Attribute('tabindex') tabIndex: string) {
     super(renderer, elementRef);
+
+    this.tabIndex = parseInt(tabIndex) || 0;
   }
 
   ngAfterViewInit() {