From 36ed4a74f8a3f6884973e392d10d00d0980193d8 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 9 Mar 2017 14:26:06 -0800
Subject: [PATCH 1/3] add aria-* attrs and keyboard bindings to datepicker
 input

---
 src/lib/datepicker/datepicker-input.ts     | 14 +++++++++++-
 src/lib/datepicker/datepicker-trigger.scss | 11 +++++++++
 src/lib/datepicker/datepicker-trigger.ts   | 26 ++++++++++++++++++++++
 src/lib/datepicker/datepicker.html         |  1 +
 src/lib/datepicker/datepicker.ts           | 15 +++++++++++++
 src/lib/input/input-container.ts           |  6 +++++
 6 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/datepicker/datepicker-trigger.scss
 create mode 100644 src/lib/datepicker/datepicker-trigger.ts

diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
index 12ab3b830c3b..f24dddf04c3d 100644
--- a/src/lib/datepicker/datepicker-input.ts
+++ b/src/lib/datepicker/datepicker-input.ts
@@ -14,6 +14,7 @@ import {SimpleDate} from '../core/datetime/simple-date';
 import {CalendarLocale} from '../core/datetime/calendar-locale';
 import {Subscription} from 'rxjs';
 import {MdInputContainer} from '../input/input-container';
+import {DOWN_ARROW} from '../core/keyboard/keycodes';
 
 
 export const MD_DATEPICKER_VALUE_ACCESSOR: any = {
@@ -28,8 +29,12 @@ export const MD_DATEPICKER_VALUE_ACCESSOR: any = {
   selector: 'input[mdDatepicker], input[matDatepicker]',
   providers: [MD_DATEPICKER_VALUE_ACCESSOR],
   host: {
+    '[attr.aria-expanded]': '_datepicker?.opened || "false"',
+    '[attr.aria-haspopup]': 'true',
+    '[attr.aria-owns]': '_datepicker?.id',
     '(input)': '_onChange($event.target.value)',
     '(blur)': '_onTouched()',
+    '(keydown)': '_onKeydown($event)',
   }
 })
 export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor, OnDestroy {
@@ -40,7 +45,7 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor
       this._datepicker._registerInput(this);
     }
   }
-  private _datepicker: MdDatepicker;
+  _datepicker: MdDatepicker;
 
   @Input()
   get value(): SimpleDate {
@@ -107,4 +112,11 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor
   setDisabledState(disabled: boolean): void {
     this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', disabled);
   }
+
+  _onKeydown(event: KeyboardEvent) {
+    if (event.altKey && event.keyCode === DOWN_ARROW) {
+      this._datepicker.open();
+      event.preventDefault();
+    }
+  }
 }
diff --git a/src/lib/datepicker/datepicker-trigger.scss b/src/lib/datepicker/datepicker-trigger.scss
new file mode 100644
index 000000000000..10c049130d78
--- /dev/null
+++ b/src/lib/datepicker/datepicker-trigger.scss
@@ -0,0 +1,11 @@
+$mat-datepicker-trigger-icon-size: 24px !default;
+
+
+.mat-datepicker-trigger {
+  display: inline-block;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') no-repeat;
+  background-size: contain;
+  height: $mat-datepicker-trigger-icon-size;
+  width: $mat-datepicker-trigger-icon-size;
+  vertical-align: middle;
+}
diff --git a/src/lib/datepicker/datepicker-trigger.ts b/src/lib/datepicker/datepicker-trigger.ts
new file mode 100644
index 000000000000..473dc07fd3dd
--- /dev/null
+++ b/src/lib/datepicker/datepicker-trigger.ts
@@ -0,0 +1,26 @@
+import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
+import {MdDatepicker} from './datepicker';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-datepicker-trigger, mat-datepicker-trigger',
+  template: '',
+  styleUrls: ['datepicker-trigger.css'],
+  host: {
+    '[class.mat-datepicker-trigger]': 'true',
+    '(click)': '_open($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MdDatepickerTrigger {
+  @Input('for') datepicker: MdDatepicker;
+
+  _open(event: Event): void {
+    if (this.datepicker) {
+      this.datepicker.open();
+      event.stopPropagation();
+    }
+  }
+}
diff --git a/src/lib/datepicker/datepicker.html b/src/lib/datepicker/datepicker.html
index c7cf5a083d31..bf20f86edd3d 100644
--- a/src/lib/datepicker/datepicker.html
+++ b/src/lib/datepicker/datepicker.html
@@ -1,5 +1,6 @@
 <template>
   <md-calendar
+      [id]="id"
       [class.mat-datepicker-touch]="touchUi"
       [class.mat-datepicker-non-touch]="!touchUi"
       [startAt]="startAt"
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 5e0e20cb3cf6..3a09d5648618 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -27,6 +27,9 @@ import {MdDatepickerInput} from './datepicker-input';
 import {CalendarLocale} from '../core/datetime/calendar-locale';
 
 
+let datepickerUid = 0;
+
+
 /** Component responsible for managing the datepicker popup/dialog. */
 @Component({
   moduleId: module.id,
@@ -62,6 +65,10 @@ export class MdDatepicker implements OnDestroy {
 
   @Output() selectedChanged = new EventEmitter<SimpleDate>();
 
+  opened = false;
+
+  id = `md-datepicker-${datepickerUid++}`;
+
   get _selected(): SimpleDate {
     return this._datepickerInput ? this._datepickerInput.value : null;
   }
@@ -112,6 +119,9 @@ export class MdDatepicker implements OnDestroy {
    * @param touchUi Whether to use the touch UI.
    */
   open(): void {
+    if (this.opened) {
+      return;
+    }
     if (!this._datepickerInput) {
       throw new MdError('Attempted to open an MdDatepicker with no associated input.');
     }
@@ -121,10 +131,14 @@ export class MdDatepicker implements OnDestroy {
     }
 
     this.touchUi ? this._openAsDialog() : this._openAsPopup();
+    this.opened = true;
   }
 
   /** Close the calendar. */
   close(): void {
+    if (!this.opened) {
+      return;
+    }
     if (this._popupRef && this._popupRef.hasAttached()) {
       this._popupRef.detach();
     }
@@ -135,6 +149,7 @@ export class MdDatepicker implements OnDestroy {
     if (this._calendarPortal && this._calendarPortal.isAttached) {
       this._calendarPortal.detach();
     }
+    this.opened = false;
   }
 
   /** Open the calendar as a dialog. */
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index 8e1c71115be2..eeefcf2155bc 100644
--- a/src/lib/input/input-container.ts
+++ b/src/lib/input/input-container.ts
@@ -291,6 +291,8 @@ export class MdInputContainer implements AfterContentInit {
 
   @ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
 
+  @ViewChild('underline') _underlineRef: ElementRef;
+
   ngAfterContentInit() {
     if (!this._mdInputChild) {
       throw new MdInputContainerMissingMdInputError();
@@ -381,4 +383,8 @@ export class MdInputContainer implements AfterContentInit {
 
     this._mdInputChild.ariaDescribedby = ids.join(' ');
   }
+
+  getPopupConnectionElementRef(): ElementRef {
+    return this._underlineRef;
+  }
 }

From 08ec6d8c16fc24d094cc210e91dfe04ba138a739 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 10 Mar 2017 12:56:26 -0800
Subject: [PATCH 2/3] fix rebase errors

---
 src/lib/datepicker/datepicker-trigger.scss | 11 ---------
 src/lib/datepicker/datepicker-trigger.ts   | 26 ----------------------
 src/lib/input/input-container.ts           |  6 -----
 3 files changed, 43 deletions(-)
 delete mode 100644 src/lib/datepicker/datepicker-trigger.scss
 delete mode 100644 src/lib/datepicker/datepicker-trigger.ts

diff --git a/src/lib/datepicker/datepicker-trigger.scss b/src/lib/datepicker/datepicker-trigger.scss
deleted file mode 100644
index 10c049130d78..000000000000
--- a/src/lib/datepicker/datepicker-trigger.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$mat-datepicker-trigger-icon-size: 24px !default;
-
-
-.mat-datepicker-trigger {
-  display: inline-block;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') no-repeat;
-  background-size: contain;
-  height: $mat-datepicker-trigger-icon-size;
-  width: $mat-datepicker-trigger-icon-size;
-  vertical-align: middle;
-}
diff --git a/src/lib/datepicker/datepicker-trigger.ts b/src/lib/datepicker/datepicker-trigger.ts
deleted file mode 100644
index 473dc07fd3dd..000000000000
--- a/src/lib/datepicker/datepicker-trigger.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
-import {MdDatepicker} from './datepicker';
-
-
-@Component({
-  moduleId: module.id,
-  selector: 'md-datepicker-trigger, mat-datepicker-trigger',
-  template: '',
-  styleUrls: ['datepicker-trigger.css'],
-  host: {
-    '[class.mat-datepicker-trigger]': 'true',
-    '(click)': '_open($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MdDatepickerTrigger {
-  @Input('for') datepicker: MdDatepicker;
-
-  _open(event: Event): void {
-    if (this.datepicker) {
-      this.datepicker.open();
-      event.stopPropagation();
-    }
-  }
-}
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index eeefcf2155bc..8e1c71115be2 100644
--- a/src/lib/input/input-container.ts
+++ b/src/lib/input/input-container.ts
@@ -291,8 +291,6 @@ export class MdInputContainer implements AfterContentInit {
 
   @ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
 
-  @ViewChild('underline') _underlineRef: ElementRef;
-
   ngAfterContentInit() {
     if (!this._mdInputChild) {
       throw new MdInputContainerMissingMdInputError();
@@ -383,8 +381,4 @@ export class MdInputContainer implements AfterContentInit {
 
     this._mdInputChild.ariaDescribedby = ids.join(' ');
   }
-
-  getPopupConnectionElementRef(): ElementRef {
-    return this._underlineRef;
-  }
 }

From c6cf0acf0564672309f4b4dc151377765750577e Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 10 Mar 2017 13:02:43 -0800
Subject: [PATCH 3/3] added comment

---
 src/lib/datepicker/datepicker.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 3a09d5648618..a2f8fb9a94d8 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -27,6 +27,7 @@ import {MdDatepickerInput} from './datepicker-input';
 import {CalendarLocale} from '../core/datetime/calendar-locale';
 
 
+/** Used to generate a unique ID for each datepicker instance. */
 let datepickerUid = 0;