fix(module:date-picker): open on enter and focus on inner input

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.
jimmytheneutrino · Jul 16, 2019 · 3b0ee51 · 3b0ee51
1 parent 4dd93e6
commit 3b0ee51
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 9 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -71,6 +71,21 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).toBeNull();
     }));
 
+    it('should open on enter', fakeAsync(() => {
+      fixture.detectChanges();
+      getPickerTriggerWrapper().dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+    }));
+
+    it('should open by click and focus on inner calendar input', fakeAsync(() => {
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      expect(document.activeElement).toEqual(queryFromOverlay('input.ant-calendar-input'));
+    }));
+
     it('should support changing language at runtime', fakeAsync(() => {
       fixture.detectChanges();
       expect(getPickerTrigger().placeholder).toBe('请选择日期');

diff --git a/components/date-picker/lib/calendar/calendar-input.component.html b/components/date-picker/lib/calendar/calendar-input.component.html
@@ -5,6 +5,7 @@
       placeholder="{{ placeholder || locale.dateSelect }}"
       value="{{ toReadableInput(value) }}"
       (keyup)="onInputKeyup($event)"
+      #inputElement
     />
   </div>
   <a class="{{ prefixCls }}-clear-btn" role="button" title="{{ locale.clear }}">

diff --git a/components/date-picker/lib/calendar/calendar-input.component.ts b/components/date-picker/lib/calendar/calendar-input.component.ts
@@ -9,10 +9,12 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnInit,
   Output,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 
@@ -34,14 +36,20 @@ export class CalendarInputComponent implements OnInit {
   @Input() disabledDate: (d: Date) => boolean;
 
   @Input() value: CandyDate;
+  @Input() autoFocus: boolean;
   @Output() readonly valueChange = new EventEmitter<CandyDate>();
+  @ViewChild('inputElement', { static: true }) inputRef: ElementRef;
 
   prefixCls: string = 'ant-calendar';
   invalidInputClass: string = '';
 
   constructor(private dateHelper: DateHelperService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    if (this.autoFocus) {
+      this.inputRef.nativeElement.focus();
+    }
+  }
 
   onInputKeyup(event: Event): void {
     const date = this.checkValidInputDate(event);

diff --git a/components/date-picker/lib/popups/date-range-popup.component.html b/components/date-picker/lib/popups/date-range-popup.component.html
@@ -33,6 +33,7 @@
     [locale]="locale"
     [disabledDate]="disabledDate"
     [format]="format"
+    [autoFocus]="partType != 'right'"
     [placeholder]="getPlaceholder(partType)"
   ></calendar-input>
 </ng-template>

diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
@@ -63,6 +63,15 @@ describe('NzMonthPickerComponent', () => {
       expect(getPickerContainer()).toBeNull();
     }));
 
+    it('should open on enter', fakeAsync(() => {
+      fixture.detectChanges();
+      getPickerTriggerWrapper().dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+    }));
+
     it('should support nzAllowClear and work properly', fakeAsync(() => {
       const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
       const initial = (fixtureInstance.nzValue = new Date());

diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html
@@ -5,6 +5,7 @@
   [ngStyle]="style"
   tabindex="0"
   (click)="onClickInputBox()"
+  (keyup.enter)="onClickInputBox()"
 >
   <!-- Content of single picker -->
   <ng-container *ngIf="!isRange">

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -107,14 +107,18 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.autoFocus) {
-      if (this.isRange) {
-        const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
-          'input:first-child'
-        ) as HTMLInputElement;
-        firstInput.focus(); // Focus on the first input
-      } else {
-        this.pickerInput.nativeElement.focus();
-      }
+      this.focus();
+    }
+  }
+
+  focus(): void {
+    if (this.isRange) {
+      const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
+        'input:first-child'
+      ) as HTMLInputElement;
+      firstInput.focus(); // Focus on the first input
+    } else {
+      this.pickerInput.nativeElement.focus();
     }
   }
 
@@ -135,6 +139,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
     if (this.realOpenState) {
       this.overlayOpen = false;
       this.openChange.emit(this.overlayOpen);
+      this.focus();
     }
   }
 

diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
@@ -66,6 +66,21 @@ describe('NzRangePickerComponent', () => {
       expect(getPickerContainer()).toBeNull();
     }));
 
+    it('should open on enter', fakeAsync(() => {
+      fixture.detectChanges();
+      getPickerTriggerWrapper().dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+    }));
+
+    it('should open by click and focus on left inner calendar input', fakeAsync(() => {
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      expect(document.activeElement).toEqual(queryFromOverlay('.ant-calendar-range-left input.ant-calendar-input'));
+    }));
+
     it('should support nzAllowClear and work properly', fakeAsync(() => {
       const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
       const initial = (fixtureInstance.modelValue = [new Date(), new Date()]);

diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
@@ -58,6 +58,15 @@ describe('NzYearPickerComponent', () => {
       expect(getPickerContainer()).toBeNull();
     }));
 
+    it('should open on enter', fakeAsync(() => {
+      fixture.detectChanges();
+      getPickerTriggerWrapper().dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+    }));
+
     it('should support nzAllowClear and work properly', fakeAsync(() => {
       const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
       const initial = (fixtureInstance.nzValue = new Date());