fix(datepicker): make date range aria-live and fix active date logic

Author: mmalerba

src/lib/datepicker/calendar-header.html

@@ -1,9 +1,11 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
     <button mat-button type="button" class="mat-calendar-period-button"
-            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel">
+            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
+            aria-live="polite">
       {{periodButtonText}}
-      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
+      <div class="mat-calendar-arrow"
+           [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
     </button>
 
     <div class="mat-calendar-spacer"></div>

src/lib/datepicker/calendar.html

@@ -15,7 +15,7 @@
 
   <mat-year-view
       *ngSwitchCase="'year'"
-      [activeDate]="activeDate"
+      [(activeDate)]="activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"
@@ -26,7 +26,7 @@
 
   <mat-multi-year-view
       *ngSwitchCase="'multi-year'"
-      [activeDate]="activeDate"
+      [(activeDate)]="activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"

src/lib/datepicker/month-view.ts

@@ -178,8 +178,8 @@ export class MatMonthView<D> implements AfterContentInit {
     // navigation should skip over disabled dates, and if so, how to implement that efficiently.
 
     const oldActiveDate = this._activeDate;
-
     const isRtl = this._isRtl();
+
     switch (event.keyCode) {
       case LEFT_ARROW:
         this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);

src/lib/datepicker/multi-year-view.ts

@@ -101,6 +101,9 @@ export class MatMultiYearView<D> implements AfterContentInit {
   /** Emits the selected year. This doesn't imply a change on the selected date */
   @Output() readonly yearSelected: EventEmitter<D> = new EventEmitter<D>();
 
+  /** Emits when any date is activated. */
+  @Output() readonly activeDateChange: EventEmitter<D> = new EventEmitter<D>();
+
   /** The body of calendar table */
   @ViewChild(MatCalendarBody) _matCalendarBody;
 
@@ -160,6 +163,7 @@ export class MatMultiYearView<D> implements AfterContentInit {
     // disabled ones from being selected. This may not be ideal, we should look into whether
     // navigation should skip over disabled dates, and if so, how to implement that efficiently.
 
+    const oldActiveDate = this._activeDate;
     const isRtl = this._isRtl();
 
     switch (event.keyCode) {
@@ -201,6 +205,10 @@ export class MatMultiYearView<D> implements AfterContentInit {
         return;
     }
 
+    if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+      this.activeDateChange.emit(this.activeDate);
+    }
+
     this._focusActiveCell();
     // Prevent unexpected default actions such as form submission.
     event.preventDefault();

src/lib/datepicker/year-view.ts

@@ -96,6 +96,9 @@ export class MatYearView<D> implements AfterContentInit {
   /** Emits the selected month. This doesn't imply a change on the selected date */
   @Output() readonly monthSelected: EventEmitter<D> = new EventEmitter<D>();
 
+  /** Emits when any date is activated. */
+  @Output() readonly activeDateChange: EventEmitter<D> = new EventEmitter<D>();
+
   /** The body of calendar table */
   @ViewChild(MatCalendarBody) _matCalendarBody;
 
@@ -153,6 +156,7 @@ export class MatYearView<D> implements AfterContentInit {
     // disabled ones from being selected. This may not be ideal, we should look into whether
     // navigation should skip over disabled dates, and if so, how to implement that efficiently.
 
+    const oldActiveDate = this._activeDate;
     const isRtl = this._isRtl();
 
     switch (event.keyCode) {
@@ -192,6 +196,10 @@ export class MatYearView<D> implements AfterContentInit {
         return;
     }
 
+    if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+      this.activeDateChange.emit(this.activeDate);
+    }
+
     this._focusActiveCell();
     // Prevent unexpected default actions such as form submission.
     event.preventDefault();