fix(datepicker): forward tabindex to generated input (#9325)

Forwards the datepicker's tabindex to the generated input element, instead of making the wrapper element focusable.

Fixes #8147.

src/components/datepicker/js/datepickerDirective.js

@@ -331,8 +331,11 @@
     // Unless the user specifies so, the datepicker should not be a tab stop.
     // This is necessary because ngAria might add a tabindex to anything with an ng-model
     // (based on whether or not the user has turned that particular feature on/off).
-    if (!$attrs.tabindex) {
-      $element.attr('tabindex', '-1');
+    if ($attrs.tabindex) {
+      this.ngInputElement.attr('tabindex', $attrs.tabindex);
+      $attrs.$set('tabindex', null);
+    } else {
+      $attrs.$set('tabindex', '-1');
     }
 
     $mdTheming($element);

src/components/datepicker/js/datepickerDirective.spec.js

@@ -338,7 +338,7 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$modelValue).toEqual(initialDate);
     });
 
-    it('shoud become touched from bluring closing the pane', function() {
+    it('should become touched from blurring closing the pane', function() {
       populateInputElement('17/1/2015');
 
       controller.openCalendarPane({
@@ -349,7 +349,7 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$touched).toBe(true);
     });
 
-    it('should become touch from bluring the input', function() {
+    it('should become touch from blurring the input', function() {
       populateInputElement('17/1/2015');
 
       var input = angular.element(controller.inputElement);
@@ -768,4 +768,21 @@ describe('md-datepicker', function() {
       expect(pageScope.blurHandler).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('tabindex behavior', function() {
+    beforeEach(function() {
+      ngElement && ngElement.remove();
+    });
+
+    it('should remove the datepicker from the tab order, if no tabindex is specified', function() {
+      createDatepickerInstance('<md-datepicker ng-model="myDate"></md-datepicker>');
+      expect(ngElement.attr('tabindex')).toBe('-1');
+    });
+
+    it('should forward the tabindex to the input', function() {
+      createDatepickerInstance('<md-datepicker ng-model="myDate" tabindex="1"></md-datepicker>');
+      expect(ngElement.attr('tabindex')).toBeFalsy();
+      expect(controller.ngInputElement.attr('tabindex')).toBe('1');
+    });
+  });
 });