From 38d86ddefc6b533715ffcb2b978d04f7a7c37e11 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Mon, 1 May 2017 20:14:44 -0700 Subject: [PATCH] address some comments --- src/lib/datepicker/calendar-body.html | 10 ++++++++-- src/lib/datepicker/calendar-body.ts | 2 +- src/lib/datepicker/calendar.html | 2 +- src/lib/datepicker/calendar.ts | 7 ++++--- src/lib/datepicker/datepicker-toggle.scss | 1 + src/lib/datepicker/datepicker.ts | 8 ++++---- src/lib/datepicker/month-view.ts | 4 ++-- src/lib/datepicker/year-view.ts | 4 ++-- 8 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/lib/datepicker/calendar-body.html b/src/lib/datepicker/calendar-body.html index 1eac4a46aab0..b2891281d2e9 100644 --- a/src/lib/datepicker/calendar-body.html +++ b/src/lib/datepicker/calendar-body.html @@ -1,10 +1,16 @@ - + {{label}} +
-
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 implements AfterContentInit { } this._focusActiveCell(); + // Prevent unexpected default actions such as form submission. event.preventDefault(); } @@ -310,6 +310,7 @@ export class MdCalendar implements AfterContentInit { } this._focusActiveCell(); + // Prevent unexpected default actions such as form submission. event.preventDefault(); } diff --git a/src/lib/datepicker/datepicker-toggle.scss b/src/lib/datepicker/datepicker-toggle.scss index d8ac34911406..dd394dd25f7c 100644 --- a/src/lib/datepicker/datepicker-toggle.scss +++ b/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; diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index e43f4e362ab2..ad59b42996e5 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/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 implements AfterContentInit { datepicker: MdDatepicker; - constructor(private _elementRef: ElementRef) {} + @ViewChild(MdCalendar) _calendar: MdCalendar; 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) { diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts index b607a21e1bde..d25036d9a6ca 100644 --- a/src/lib/datepicker/month-view.ts +++ b/src/lib/datepicker/month-view.ts @@ -149,9 +149,9 @@ export class MdMonthView 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)); } } diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 4482b2f87574..ca27058130e3 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -116,11 +116,11 @@ export class MdYearView 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. */