feat(datepicker): add aria-* attrs and keyboard bindings to datepicke…

…r input (#3542) * add aria-* attrs and keyboard bindings to datepicker input * fix rebase errors * added comment
angular · May 5, 2017 · ad354ec · ad354ec
1 parent cdd9bab
commit ad354ec
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git 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.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
@@ -27,6 +27,10 @@ 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;
+
+
 /** Component responsible for managing the datepicker popup/dialog. */
 @Component({
   moduleId: module.id,
@@ -62,6 +66,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 +120,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 +132,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 +150,7 @@ export class MdDatepicker implements OnDestroy {
     if (this._calendarPortal && this._calendarPortal.isAttached) {
       this._calendarPortal.detach();
     }
+    this.opened = false;
   }
 
   /** Open the calendar as a dialog. */