fix(checkbox): disable checkboxes with tabindex=-1

Closes #2087

Author: Marcy Sutton

src/components/checkbox/checkbox.js

@@ -72,7 +72,7 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
   function compile (tElement, tAttrs) {
 
     tAttrs.type = 'checkbox';
-    tAttrs.tabIndex = 0;
+    tAttrs.tabindex = tAttrs.tabindex || '0';
     tElement.attr('role', tAttrs.type);
 
     return function postLink(scope, element, attr, ngModelCtrl) {
@@ -85,7 +85,10 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
             ngModelCtrl.$setViewValue.bind(ngModelCtrl)
         );
       }
-
+      $$watchExpr('ngDisabled', 'tabindex', {
+        true: '-1',
+        false: attr.tabindex
+      });
       $mdAria.expectWithText(element, 'aria-label');
 
       // Reuse the original input[type=checkbox] directive from Angular core.
@@ -113,6 +116,16 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
 
       ngModelCtrl.$render = render;
 
+      function $$watchExpr(expr, htmlAttr, valueOpts) {
+        if (attr[expr]) {
+          scope.$watch(attr[expr], function(val) {
+            if (valueOpts[val]) {
+              element.attr(htmlAttr, valueOpts[val]);
+            }
+          });
+        }
+      }
+
       function keypressHandler(ev) {
         var keyCode = ev.which || ev.keyCode;
         if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {

src/components/checkbox/checkbox.spec.js

@@ -49,7 +49,7 @@ describe('mdCheckbox', function() {
     expect(cbElements.eq(0).attr('role')).toEqual('checkbox');
   }));
 
-  it('should be disabled with disabled attr', inject(function($compile, $rootScope) {
+  it('should be disabled with ngDisabled attr', inject(function($compile, $rootScope) {
     var element = $compile('<div>' +
                              '<md-checkbox ng-disabled="isDisabled" ng-model="blue">' +
                              '</md-checkbox>' +
@@ -69,6 +69,31 @@ describe('mdCheckbox', function() {
     expect($rootScope.blue).toBe(true);
   }));
 
+  it('should preserve existing tabindex', inject(function($compile, $rootScope) {
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-model="blue" tabindex="2">' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    var checkbox = element.find('md-checkbox');
+    expect(checkbox.attr('tabindex')).toBe('2');
+  }));
+
+  it('should disable with tabindex=-1', inject(function($compile, $rootScope) {
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-disabled="isDisabled" ng-model="blue">' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    var checkbox = element.find('md-checkbox');
+
+    $rootScope.$apply('isDisabled = true');
+    expect(checkbox.attr('tabindex')).toBe('-1');
+
+    $rootScope.$apply('isDisabled = false');
+    expect(checkbox.attr('tabindex')).toBe('0');
+  }));
+
   it('should not set focus state on mousedown', inject(function($compile, $rootScope) {
     var checkbox = $compile('<md-checkbox ng-model="blue">')($rootScope.$new());
     $rootScope.$apply();