fix(calendar): fix focus behavior on open

Author: jelbourn

src/components/calendar/calendar.js

@@ -11,24 +11,24 @@
     'material.core', 'material.components.icon'
   ]).directive('mdCalendar', calendarDirective);
 
-  // FUTURE VERSION
-  // TODO(jelbourn): Animated month transition on ng-model change.
-  // TODO(jelbourn): Scroll snapping
-  // TODO(jelbourn): Month headers stick to top when scrolling
-  // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.
-  // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live
-  //     announcement and key handling).
-
 
   // PRE RELEASE
   // TODO(jelbourn): Base colors on the theme
-  // TODO(jelbourn): Align style with spec
   // TODO(jelbourn): read-only state.
   // TODO(jelbourn): Make sure the *time* on the written date makes sense (probably midnight).
   // TODO(jelbourn): Date "isComplete" logic
   // TODO(jelbourn): Apple + up / down == PgDown and PgUp
   // TODO(jelbourn): Documentation
   // TODO(jelbourn): Demo that uses moment.js
+  // TODO(jelbourn): Fix NVDA stealing key presses (IE) ???
+
+  // FUTURE VERSION
+  // TODO(jelbourn): Animated month transition on ng-model change.
+  // TODO(jelbourn): Scroll snapping
+  // TODO(jelbourn): Month headers stick to top when scrolling
+  // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.
+  // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live
+  //     announcement and key handling).
 
   // COULD GO EITHER WAY
   // TODO(jelbourn): Clicking on the month label opens the month-picker.
@@ -47,10 +47,10 @@
           '<table class="md-calendar-day-header"><thead></thead></table>' +
           '<div class="md-calendar-scroll-mask">' +
             '<md-virtual-repeat-container class="md-calendar-scroller">' +
-              '<table class="md-calendar">' +
-                '<tbody md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
+              '<table role="grid" class="md-calendar">' +
+                '<tbody role="rowgroup" md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
                     'md-month-offset="$index" class="md-calendar-month" aria-hidden="true" ' +
-                    'md-start-index="1000" ' +
+                    'md-start-index="ctrl.getSelectedMonthIndex()" ' +
                     'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
               '</table>' +
             '</md-virtual-repeat-container>' +
@@ -87,7 +87,7 @@
       $$mdDateUtil, $$mdDateLocale, $mdInkRipple, $mdUtil) {
 
     /** @type {Array<number>} Dummy array-like object for virtual-repeat to iterate over. */
-    this.items = {length: 2000};
+    this.items = {length: 2000 * 12};
 
     /** @final {!angular.$animate} */
     this.$animate = $animate;
@@ -156,6 +156,12 @@
      */
     this.displayDate = null;
 
+    /**
+     * The date that has or should have browser focus.
+     * @type {Date}
+     */
+    this.focusDate = null;
+
     /** @type {boolean} */
     this.isInitialized = false;
 
@@ -184,12 +190,6 @@
       }
     };
 
-    // Do a one-time scroll to the selected date once the months have done their initial render.
-    var off = $scope.$on('md-calendar-month-initial-render', function() {
-      //self.scrollToMonth(self.selectedDate);
-      off();
-    });
-
     this.attachCalendarEventListeners();
 
     // DEBUG
@@ -224,6 +224,14 @@
     this.isInitialized = true;
   };
 
+  /**
+   * Gets the "index" of the currently selected date as it would be in the virtual-repeat.
+   * @returns {number}
+   */
+  CalendarCtrl.prototype.getSelectedMonthIndex = function() {
+    return this.dateUtil.getMonthDistance(firstRenderableDate, this.selectedDate || this.today);
+  };
+
   /**
    * Hides the vertical scrollbar on the calendar scroller by setting the width on the
    * calendar scroller and the `overflow: hidden` wrapper around the scroller, and then setting
@@ -263,7 +271,7 @@
    */
   CalendarCtrl.prototype.attachCalendarEventListeners = function() {
     // Keyboard interaction.
-    angular.element(this.calendarElement).on('keydown', this.handleKeyEvent.bind(this));
+    this.$element.on('keydown', this.handleKeyEvent.bind(this));
   };
 
   /*** User input handling ***/
@@ -293,11 +301,7 @@
 
       // Selection isn't occuring, so the key event is either navigation or nothing.
       var date = self.getFocusDateFromKeyEvent(event);
-
-      // Prevent the default on the key event only if it triggered a date navigation.
-      if (!self.dateUtil.isSameDay(date, self.displayDate)) {
-        event.preventDefault();
-      }
+      event.preventDefault();
 
       // Since this is a keyboard interaction, actually give the newly focused date keyboard
       // focus after the been brought into view.
@@ -344,10 +348,13 @@
    * @param {Date=} opt_date
    */
   CalendarCtrl.prototype.focus = function(opt_date) {
-    var cellId = this.getDateId(opt_date || this.selectedDate);
+    var date = opt_date || this.selectedDate;
+    var cellId = this.getDateId(date);
     var cell = this.calendarElement.querySelector('#' + cellId);
     if (cell) {
       cell.focus();
+    } else {
+      this.focusDate = date;
     }
   };
 

src/components/calendar/calendarMonth.js

@@ -25,9 +25,6 @@
         monthCtrl.calendarCtrl = calendarCtrl;
         monthCtrl.generateContent();
 
-        // Emit an event to let the parent md-calendar know that initial render has happened.
-        scope.$emit('md-calendar-month-initial-render');
-
         // The virtual-repeat re-uses the same DOM elements, so there are only a limited number
         // of repeated items that are linked, and then those elements have their bindings updataed.
         // Since the months are not generated by bindings, we simply regenerate the entire thing
@@ -63,6 +60,12 @@
      * @type {number}
      */
     this.offset = 0;
+
+    /**
+     * Date cell to focus after appending the month to the document.
+     * @type {HTMLElement}
+     */
+    this.focusAfterAppend = null;
   }
 
   /** Generate and append the content for this month to the directive element. */
@@ -71,6 +74,10 @@
     var date = this.dateUtil.incrementMonths(this.calendarCtrl.today, offset);
     this.$element.empty();
     this.$element.append(this.buildCalendarForMonth(date));
+    if (this.focusAfterAppend) {
+      this.focusAfterAppend.focus();
+      this.focusAfterAppend = null;
+    }
   };
 
   /**
@@ -81,9 +88,12 @@
    * @returns {HTMLElement}
    */
   CalendarMonthCtrl.prototype.buildDateCell = function(opt_date) {
+    var calendarCtrl = this.calendarCtrl;
+
     // TODO(jelbourn): cloneNode is likely a faster way of doing this.
     var cell = document.createElement('td');
     cell.classList.add('md-calendar-date');
+    cell.setAttribute('role', 'gridcell');
 
     if (opt_date) {
       // Add a indicator for select, hover, and focus states.
@@ -93,26 +103,36 @@
       selectionIndicator.textContent = this.dateLocale.dates[opt_date.getDate()];
 
       cell.setAttribute('tabindex', '-1');
-      cell.id = this.calendarCtrl.getDateId(opt_date);
-      cell.addEventListener('click', this.calendarCtrl.cellClickHandler);
+      cell.id = calendarCtrl.getDateId(opt_date);
+      cell.addEventListener('click', calendarCtrl.cellClickHandler);
 
       // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.
       cell.setAttribute('data-timestamp', opt_date.getTime());
 
       // TODO(jelourn): Doing these comparisons for class addition during generation might be slow.
       // It may be better to finish the construction and then query the node and add the class.
-      if (this.dateUtil.isSameDay(opt_date, this.calendarCtrl.today)) {
+      if (this.dateUtil.isSameDay(opt_date, calendarCtrl.today)) {
         cell.classList.add(TODAY_CLASS);
       }
 
-      if (this.dateUtil.isValidDate(this.calendarCtrl.selectedDate) &&
-          this.dateUtil.isSameDay(opt_date, this.calendarCtrl.selectedDate)) {
+      if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&
+          this.dateUtil.isSameDay(opt_date, calendarCtrl.selectedDate)) {
         cell.classList.add(SELECTED_DATE_CLASS);
       }
+
+      if (calendarCtrl.focusDate && this.dateUtil.isSameDay(opt_date, calendarCtrl.focusDate)) {
+        this.focusAfterAppend = cell;
+      }
     }
 
     return cell;
   };
+  
+  CalendarMonthCtrl.prototype.buildDateRow = function() {
+    var row = document.createElement('tr');
+    row.setAttribute('role', 'row');
+    return row;
+  };
 
   /**
    * Builds the <tbody> content for the given date's month.
@@ -129,7 +149,7 @@
     // Store rows for the month in a document fragment so that we can append them all at once.
     var monthBody = document.createDocumentFragment();
 
-    var row = document.createElement('tr');
+    var row = this.buildDateRow();
     monthBody.appendChild(row);
 
     // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label
@@ -141,7 +161,7 @@
     if (firstDayOfTheWeek <= 2) {
       monthLabelCell.setAttribute('colspan', '7');
 
-      var monthLabelRow = document.createElement('tr');
+      var monthLabelRow = this.buildDateRow();
       monthLabelRow.appendChild(monthLabelCell);
       monthBody.insertBefore(monthLabelRow, row);
     } else {
@@ -167,7 +187,7 @@
       // If we've reached the end of the week, start a new row.
       if (dayOfWeek === 7) {
         dayOfWeek = 0;
-        row = document.createElement('tr');
+        row = this.buildDateRow();
         monthBody.appendChild(row);
       }
 
@@ -186,7 +206,7 @@
     // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat
     // requires that all items have exactly the same height.
     while (monthBody.childNodes.length < 6) {
-      var whitespaceRow = document.createElement('tr');
+      var whitespaceRow = this.buildDateRow();
       for (var i = 0; i < 7; i++) {
         whitespaceRow.appendChild(this.buildDateCell());
       }

src/components/calendar/datePicker.js

@@ -2,7 +2,6 @@
   'use strict';
 
   // PRE RELEASE
-  // TODO(jelbourn): make down-arrow a button to open the calendar
   // TODO(jelbourn): aria attributes tying together date input and floating calendar.
   // TODO(jelbourn): something for mobile (probably calendar panel should take up entire screen)
   // TODO(jelbourn): make sure this plays well with validation and ngMessages.
@@ -251,6 +250,8 @@
     // Add shadow to the calendar pane only after the UI thread has reached idle, allowing the
     // content of the calender pane to be rendered.
     this.$timeout(function() {
+      this.calendarPane.classList.add('md-pane-open');
+
       this.calendarShadow.style.top = (elementRect.top - bodyRect.top) + 'px';
       this.calendarShadow.style.left = this.calendarPane.style.left;
       this.calendarShadow.style.height =
@@ -262,6 +263,7 @@
   /** Detach the floating calendar pane from the document. */
   DatePickerCtrl.prototype.detachCalendarPane = function() {
     this.$element.removeClass('md-datepicker-open');
+    this.calendarPane.classList.remove('md-pane-open');
 
     // Use native DOM removal because we do not want any of the angular state of this element
     // to be disposed.

src/components/calendar/datePicker.scss

@@ -64,7 +64,7 @@ $md-datepicker-button-gap: 12px;
   width: $md-calendar-width;
 }
 
-// Down "disclosure" triangle/arrow indicating that the datepicker can be opened.
+// Down triangle/arrow indicating that the datepicker can be opened.
 // We can do this entirely with CSS without needing to load an icon.
 // See https://css-tricks.com/snippets/css/css-triangle/
 $md-date-arrow-size: 6px;
@@ -116,7 +116,7 @@ $md-date-arrow-size: 6px;
     height: 40px;
   }
 
-  .md-datepicker-expand-triangle {
+  .md-datepicker-triangle-button {
     display: none;
   }