fix(datepicker): add aria-owns and aria-expanded support (#9733)

* Adds the `aria-owns` attribute to the datepicker, linking it to the calendar pane. This is necessary since the calendar isn't a child of the datepicker in the DOM.
* Adds the `aria-expanded` attribute, indicating when the calendar is open.
* Moves the accessibility tests to their own separate suite.

Fixes #9727.

Author: crisbeto

src/components/datepicker/js/datepickerDirective.js

@@ -89,13 +89,15 @@
             (ariaLabelValue ? 'aria-label="' + ariaLabelValue + '" ' : '') +
             'class="md-datepicker-input" ' +
             'aria-haspopup="true" ' +
+            'aria-expanded="{{ctrl.isCalendarOpen}}" ' +
+            'aria-owns="{{::ctrl.calendarPaneId}}"' +
             'ng-focus="ctrl.setFocused(true)" ' +
             'ng-blur="ctrl.setFocused(false)"> ' +
             triangleButton +
         '</div>' +
 
         // This pane will be detached from here and re-attached to the document body.
-        '<div class="md-datepicker-calendar-pane md-whiteframe-z1">' +
+        '<div class="md-datepicker-calendar-pane md-whiteframe-z1" id="{{::ctrl.calendarPaneId}}">' +
           '<div class="md-datepicker-input-mask">' +
             '<div class="md-datepicker-input-mask-opaque"></div>' +
           '</div>' +
@@ -311,7 +313,7 @@
     this.calendarPaneOpenedFrom = null;
 
     /** @type {String} Unique id for the calendar pane. */
-    this.calendarPane.id = 'md-date-pane' + $mdUtil.nextUid();
+    this.calendarPaneId = 'md-date-pane' + $mdUtil.nextUid();
 
     /** Pre-bound click handler is saved so that the event listener can be removed. */
     this.bodyClickHandler = angular.bind(this, this.handleBodyClick);

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

@@ -105,11 +105,6 @@ describe('md-datepicker', function() {
     expect(controller.inputElement.placeholder).toBe('Fancy new placeholder');
   });
 
-  it('should forward the aria-label to the generated input', function() {
-    createDatepickerInstance('<md-datepicker ng-model="myDate" aria-label="Enter a date"></md-datepicker>');
-    expect(controller.ngInputElement.attr('aria-label')).toBe('Enter a date');
-  });
-
   it('should throw an error when the model is not a date', function() {
     expect(function() {
       pageScope.myDate = '2015-01-01';
@@ -793,20 +788,53 @@ describe('md-datepicker', function() {
     });
   });
 
-  describe('tabindex behavior', function() {
-    beforeEach(function() {
+  describe('accessibility', function() {
+    it('should forward the aria-label to the generated input', function() {
       ngElement && ngElement.remove();
+      createDatepickerInstance('<md-datepicker ng-model="myDate" aria-label="Enter a date"></md-datepicker>');
+      expect(controller.ngInputElement.attr('aria-label')).toBe('Enter a date');
     });
 
-    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 set the aria-owns value, corresponding to the id of the calendar pane', function() {
+      var ariaAttr = controller.ngInputElement.attr('aria-owns');
+
+      expect(ariaAttr).toBeTruthy();
+      expect(controller.calendarPane.id).toBe(ariaAttr);
     });
 
-    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');
+    it('should toggle the aria-expanded value', function() {
+      expect(controller.ngInputElement.attr('aria-expanded')).toBe('false');
+
+      controller.openCalendarPane({
+        target: controller.inputElement
+      });
+      scope.$apply();
+
+      expect(controller.ngInputElement.attr('aria-expanded')).toBe('true');
+
+      controller.closeCalendarPane();
+      scope.$apply();
+
+      expect(controller.ngInputElement.attr('aria-expanded')).toBe('false');
+    });
+
+    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');
+      });
     });
+
   });
+
 });