feat(calendar): cleanup and i18n

Author: jelbourn

src/components/autocomplete/autocomplete.scss

@@ -97,19 +97,11 @@ md-autocomplete {
     }
   }
   input:not(.md-input) {
+    @include md-flat-input();
     width: 100%;
-    box-sizing: border-box;
-    border: none;
-    box-shadow: none;
     padding: 0 15px;
-    font-size: 14px;
     line-height: 40px;
     height: 40px;
-    outline: none;
-    background: transparent;
-    &::-ms-clear {
-      display: none;
-    }
   }
   button {
     position: relative;

src/components/calendar/calendar-theme.scss

@@ -1,4 +1,4 @@
-// Theme styles for mdCalendar.
+/** Theme styles for mdCalendar. */
 
 .md-calendar {
   color: '{{foreground-2}}';
@@ -17,6 +17,8 @@
   color: '{{primary-500}}'; // blue-500
 }
 
+// The CSS class `md-focus` is used instead of real browser focus for accessibility reasons
+// (the root md-calendar holds browser focus).
 .md-calendar-date.md-focus {
   .md-calendar-date-selection-indicator {
     background-color: '{{background-300}}'; // grey-300

src/components/calendar/calendar.js

@@ -14,7 +14,7 @@
 
 
   // PRE RELEASE
-  // TODO(jelbourn): Date "isComplete" logic
+  // TODO(mchen): Date "isComplete" logic
   // TODO(jelbourn): Fix NVDA stealing key presses (IE) ???
 
   // POST RELEASE
@@ -41,10 +41,10 @@
   function calendarDirective() {
     return {
       template:
-          '<table class="md-calendar-day-header"><thead></thead></table>' +
-          '<div class="md-calendar-scroll-mask">' +
-            '<md-virtual-repeat-container class="md-calendar-scroller">' +
-              '<table role="grid" class="md-calendar">' +
+          '<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table>' +
+          '<div  aria-hidden="true" class="md-calendar-scroll-mask">' +
+            '<md-virtual-repeat-container class="md-calendar-scroll-container">' +
+              '<table 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="ctrl.getSelectedMonthIndex()" ' +
@@ -83,7 +83,10 @@
   function CalendarCtrl($element, $attrs, $scope, $animate, $q, $mdConstant,
       $$mdDateUtil, $$mdDateLocale, $mdInkRipple, $mdUtil) {
 
-    /** @type {Array<number>} Dummy array-like object for virtual-repeat to iterate over. */
+    /** @type {Array<number>}
+     * Dummy array-like object for virtual-repeat to iterate over. The length is the total
+     * number of months that can be viewed.
+     * */
     this.items = {length: 2000};
 
     /** @final {!angular.$animate} */
@@ -192,9 +195,6 @@
     };
 
     this.attachCalendarEventListeners();
-
-    // DEBUG
-    window.ctrl = this;
   }
 
 
@@ -225,14 +225,6 @@
     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
@@ -254,22 +246,8 @@
     scroller.style.paddingRight = scrollbarWidth + 'px';
   };
 
-  /**
-   * Scrolls to the month of the given date.
-   * @param {Date} date
-   */
-  CalendarCtrl.prototype.scrollToMonth = function(date) {
-    if (!this.dateUtil.isValidDate(date)) {
-      return;
-    }
 
-    var monthDistance = this.dateUtil.getMonthDistance(firstRenderableDate, date);
-    this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;
-  };
-
-  /**
-   * Attach event listeners for the calendar.
-   */
+  /** Attach event listeners for the calendar. */
   CalendarCtrl.prototype.attachCalendarEventListeners = function() {
     // Keyboard interaction.
     this.$element.on('keydown', this.handleKeyEvent.bind(this));
@@ -340,6 +318,27 @@
     }
   };
 
+  /**
+   * 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);
+  };
+
+  /**
+   * Scrolls to the month of the given date.
+   * @param {Date} date
+   */
+  CalendarCtrl.prototype.scrollToMonth = function(date) {
+    if (!this.dateUtil.isValidDate(date)) {
+      return;
+    }
+
+    var monthDistance = this.dateUtil.getMonthDistance(firstRenderableDate, date);
+    this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;
+  };
+
   /**
    * Sets the ng-model value for the calendar and emits a change event.
    * @param {Date} date
@@ -356,6 +355,7 @@
    */
   CalendarCtrl.prototype.focus = function(opt_date) {
     this.$element[0].focus();
+    this.announceDisplayDateChange(null, opt_date);
 
     var previousFocus = this.calendarElement.querySelector('.md-focus');
     if (previousFocus) {
@@ -372,19 +372,6 @@
     }
   };
 
-  /*** Animation ***/
-
-  /**
-   * Animates the transition from the calendar's current month to the given month.
-   * @param date
-   * @returns {angular.$q.Promise} The animation promise.
-   */
-  CalendarCtrl.prototype.animateDateChange = function(date) {
-    this.scrollToMonth(date);
-    return this.$q.when();
-  };
-
-
   /*** Updating the displayed / selected date ***/
 
   /**
@@ -454,6 +441,16 @@
     return animationPromise;
   };
 
+  /**
+   * Animates the transition from the calendar's current month to the given month.
+   * @param {Date} date
+   * @returns {angular.$q.Promise} The animation promise.
+   */
+  CalendarCtrl.prototype.animateDateChange = function(date) {
+    this.scrollToMonth(date);
+    return this.$q.when();
+  };
+
   /**
    * Announces a change in date to the calendar's aria-live region.
    * @param {Date} previousDate

src/components/calendar/calendar.scss

@@ -1,4 +1,4 @@
-// Styles for mdCalendar.
+/** Styles for mdCalendar. */
 $md-calendar-cell-size: 44px !default;
 $md-calendar-header-height: 40px;
 $md-calendar-cell-emphasis-size: 40px !default;
@@ -52,44 +52,47 @@ md-calendar {
 }
 
 // Wrap the scroll with overflow: hidden in order to hide the scrollbar.
-// The inner .md-calendar-scroller will using a padding-right to push the
+// The inner .md-calendar-scroll-container will using a padding-right to push the
 // scrollbar into the hidden area (done with javascript).
 .md-calendar-scroll-mask {
   display: inline-block;
   overflow: hidden;
   height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
 
+  // The actual scrolling element.
   .md-virtual-repeat-scroller {
+    // These two properties are needed to get touch momentum to work.
+    // See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
+  // Offsetter is the element that is translateY'ed into view of the user and contains the
+  // calendar content.
   .md-virtual-repeat-offsetter {
     width: 100%;
   }
 }
 
-// Scrolling element (the md-virtual-repeat-container).
-.md-calendar-scroller {
+// Contains the scrolling element (this is the md-virtual-repeat-container).
+.md-calendar-scroll-container {
   display: inline-block;
   height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
   width: $md-calendar-width;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 
 // A single date cell in the calendar table.
 .md-calendar-date {
   @include md-calendar-cell();
 }
 
-// Element inside of every date cell that can indicate that the date is selected.
+// Circle element inside of every date cell used to indicate selection or focus.
 .md-calendar-date-selection-indicator {
-  transition-property: background-color, color;
-  transition-duration: $swift-ease-out-duration;
-  transition-timing-function: $swift-ease-out-timing-function;
+  transition: background-color, color $swift-ease-out-duration $swift-ease-out-timing-function;
 
   border-radius: 50%;
   display: inline-block;
@@ -129,7 +132,7 @@ md-calendar {
     border-bottom-style: solid;
   }
 
-  // The divider between months doesn't actualyl change the height of the tbody in which the
+  // The divider between months doesn't actually change the height of the tbody in which the
   // border appear; it changes the height of the following tbody. The causes the first-child to be
   // 1px shorter than the other months. We fix this by adding an invisible border-top.
   &:first-child {

src/components/calendar/dateLocaleProvider.js

@@ -56,6 +56,18 @@
        * @type {function(Date): string}
        */
       this.longAnnounceFormatter = null;
+
+      /**
+       * ARIA label for the calendar "dialog" used in the datepicker.
+       * @type {string}
+       */
+      this.msgCalendar = '';
+
+      /**
+       * ARIA label for the datepicker's "Open calendar" buttons.
+       * @type {string}
+       */
+      this.msgOpenCalendar = '';
     }
 
     /**
@@ -64,7 +76,7 @@
      * @param $locale
      * @returns {DateLocale}
      */
-    DateLocaleProvider.prototype.$get = function($locale) {
+    DateLocaleProvider.prototype.$get = function($locale, $filter) {
       /**
        * Default date-to-string formatting function.
        * @param {!Date} date
@@ -99,7 +111,7 @@
        */
       function defaultShortAnnounceFormatter(date) {
         // Example: 'Tuesday 12'
-        return service.days[date.getDay()] + ' ' + service.dates[date.getDate()];
+        return $filter('date')(date, 'EEEE d');
       }
 
       /**
@@ -108,13 +120,8 @@
        * @returns {string}
        */
       function defaultLongAnnounceFormatter(date) {
-        // Example: '2015 June Thursday 18'
-        return [
-          date.getFullYear(),
-          service.months[date.getMonth()],
-          service.days[date.getDay()],
-          service.dates[date.getDate()]
-        ].join(' ');
+        // Example: 'Thursday June 18 2015'
+        return $filter('date')(date, 'fulldate');
       }
 
       // The default "short" day strings are the first character of each day,
@@ -129,8 +136,11 @@
         defaultDates[i] = i;
       }
 
-      // TODO(jelbourn): Freeze this object.
-      var service = {
+      // Default ARIA messages are in English (US).
+      var defaultMsgCalendar = 'Calendar';
+      var defaultMsgOpenCalendar = 'Open calendar';
+
+      var service = Object.freeze({
         months: this.months || $locale.DATETIME_FORMATS.MONTH,
         shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,
         days: this.days || $locale.DATETIME_FORMATS.DAY,
@@ -140,8 +150,10 @@
         parseDate: this.parseDate || defaultParseDate,
         monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,
         shortAnnounceFormatter: this.shortAnnounceFormatter || defaultShortAnnounceFormatter,
-        longAnnounceFormatter: this.longAnnounceFormatter || defaultLongAnnounceFormatter
-      };
+        longAnnounceFormatter: this.longAnnounceFormatter || defaultLongAnnounceFormatter,
+        msgCalendar: this.msgCalendar || defaultMsgCalendar,
+        msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar
+      });
 
       return service;
     };

src/components/calendar/datePicker-theme.scss

@@ -1,3 +1,5 @@
+/** Theme styles for mdDatepicker. */
+
 md-datepicker.md-THEME_NAME-theme {
   background: white;
 }