address some comments

src/lib/datepicker/calendar-body.html

@@ -1,10 +1,16 @@
-<!-- If there's not enough space in the first row, create a separate label row. -->
+<!--
+  If there's not enough space in the first row, create a separate label row. We mark this row as
+  aria-hidden because we don't want it to be read out as one of the weeks in the month.
+-->
 <tr *ngIf="_firstRowOffset < labelMinRequiredCells" aria-hidden="true">
   <td class="mat-calendar-body-label" [attr.colspan]="numCols" >{{label}}</td>
 </tr>
 
 <!-- Create the first row separately so we can include a special spacer cell. -->
 <tr *ngFor="let row of rows; let rowIndex = index" role="row">
+  <!--
+    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
+  -->
   <td *ngIf="rowIndex === 0 && _firstRowOffset"
       aria-hidden="true"
       class="mat-calendar-body-label"
@@ -17,7 +23,7 @@
       [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
       [class.mat-calendar-body-disabled]="!item.enabled"
       [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
-      [attr.aria-label]="item.a11yLabel"
+      [attr.aria-label]="item.ariaLabel"
       (click)="_cellClicked(item)">
     <div class="mat-calendar-body-cell-content"
          [class.mat-calendar-body-selected]="selectedValue === item.value"

src/lib/datepicker/calendar-body.ts

@@ -15,7 +15,7 @@ import {
 export class MdCalendarCell {
   constructor(public value: number,
               public displayValue: string,
-              public a11yLabel: string,
+              public ariaLabel: string,
               public enabled: boolean) {}
 }
 

src/lib/datepicker/calendar.html

@@ -15,7 +15,7 @@
   </div>
 </div>
 
-<div class="mat-calendar-content" tabindex="-1" (keydown)="_handleCalendarBodyKeydown($event)"
+<div class="mat-calendar-content" (keydown)="_handleCalendarBodyKeydown($event)"
      cdkMonitorSubtreeFocus>
   <md-month-view
       *ngIf="_monthView"

src/lib/datepicker/calendar.ts

@@ -39,7 +39,6 @@ import {MD_DATE_FORMATS, MdDateFormats} from '../core/datetime/date-formats';
   styleUrls: ['calendar.css'],
   host: {
     '[class.mat-calendar]': 'true',
-    '(focus)': '_focusActiveCell()',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -207,10 +206,10 @@ export class MdCalendar<D> implements AfterContentInit {
 
   /** Focuses the active cell after the microtask queue is empty. */
   _focusActiveCell() {
-    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+    this._ngZone.runOutsideAngular(() => this._ngZone.onStable.first().subscribe(() => {
       let activeEl = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
       activeEl.focus();
-    });
+    }));
   }
 
   /** Whether the two dates represent the same view in the current view mode (month or year). */
@@ -267,6 +266,7 @@ export class MdCalendar<D> implements AfterContentInit {
     }
 
     this._focusActiveCell();
+    // Prevent unexpected default actions such as form submission.
     event.preventDefault();
   }
 
@@ -310,6 +310,7 @@ export class MdCalendar<D> implements AfterContentInit {
     }
 
     this._focusActiveCell();
+    // Prevent unexpected default actions such as form submission.
     event.preventDefault();
   }
 

src/lib/datepicker/datepicker-toggle.scss

@@ -3,6 +3,7 @@ $mat-datepicker-toggle-icon-size: 24px !default;
 
 .mat-datepicker-toggle {
   display: inline-block;
+  // Note: SVG needs to be base64 encoded or it will not work on IE11.
   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMWgtMnYySDhWMUg2djJINWMtMS4xMSAwLTEuOTkuOS0xLjk5IDJMMyAxOWMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWOGgxNHYxMXpNNyAxMGg1djVIN3oiLz48L3N2Zz4=') no-repeat;
   background-size: contain;
   height: $mat-datepicker-toggle-icon-size;

src/lib/datepicker/datepicker.ts

@@ -3,13 +3,13 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentRef,
-  ElementRef,
   EventEmitter,
   Inject,
   Input,
   OnDestroy,
   Optional,
   Output,
+  ViewChild,
   ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
@@ -34,6 +34,7 @@ import {DateAdapter} from '../core/datetime/index';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MD_DATE_FORMATS, MdDateFormats} from '../core/datetime/date-formats';
 import {ESCAPE} from '../core/keyboard/keycodes';
+import {MdCalendar} from './calendar';
 
 
 /** Used to generate a unique ID for each datepicker instance. */
@@ -63,16 +64,15 @@ let datepickerUid = 0;
 export class MdDatepickerContent<D> implements AfterContentInit {
   datepicker: MdDatepicker<D>;
 
-  constructor(private _elementRef: ElementRef) {}
+  @ViewChild(MdCalendar) _calendar: MdCalendar<D>;
 
   ngAfterContentInit() {
-    this._elementRef.nativeElement.querySelector('.mat-calendar-content').focus();
+    this._calendar._focusActiveCell();
   }
 
   /**
    * Handles keydown event on datepicker content.
    * @param event The event.
-   * @private
    */
   _handleKeydown(event: KeyboardEvent): void {
     switch (event.keyCode) {

src/lib/datepicker/month-view.ts

@@ -149,9 +149,9 @@ export class MdMonthView<D> implements AfterContentInit {
           this._dateAdapter.getMonth(this.activeDate), i + 1);
       let enabled = !this.dateFilter ||
           this.dateFilter(date);
-      let a11yLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
+      let ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
       this._weeks[this._weeks.length - 1]
-          .push(new MdCalendarCell(i + 1, dateNames[i], a11yLabel, enabled));
+          .push(new MdCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
     }
   }
 

src/lib/datepicker/year-view.ts

@@ -116,11 +116,11 @@ export class MdYearView<D> implements AfterContentInit {
 
   /** Creates an MdCalendarCell for the given month. */
   private _createCellForMonth(month: number, monthName: string) {
-    let a11yLabel = this._dateAdapter.format(
+    let ariaLabel = this._dateAdapter.format(
         this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),
         this._dateFormats.display.monthYearA11yLabel);
     return new MdCalendarCell(
-        month, monthName.toLocaleUpperCase(), a11yLabel, this._isMonthEnabled(month));
+        month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
   }
 
   /** Whether the given month is enabled. */