fix(module:time-picker): make keyboard navigation possible

Tabbing away from time-picker overlay was not possible: It wrapped
around and usually ended up in browser's address bar. Also, once you
selected time-picker wrapper span, there was no way to open the overlay
via keyboard.
This fixes this. Tabbing away from overlay now focuses on time-picker
wrapper span. Pressing enter on the wrapper span opens the overlay.

components/time-picker/nz-time-picker.component.html

@@ -6,7 +6,8 @@
   [placeholder]="nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)"
   [(ngModel)]="value"
   readonly="readonly"
-  (click)="open()">
+  (click)="open()"
+  (keyup.enter)="open()">
 <span class="ant-time-picker-icon">
   <i nz-icon nzType="clock-circle"></i>
 </span>
@@ -50,7 +51,9 @@
     [opened]="nzOpen"
     [nzClearText]="nzClearText"
     [nzAllowEmpty]="nzAllowEmpty"
+    (keyup.enter)="close()"
     [(ngModel)]="value">
   </nz-time-picker-panel>
+  <span tabindex="0" (focus)="close()" class="nz-tab-catching-span"></span>
 </ng-template>
 

components/time-picker/nz-time-picker.component.spec.ts

@@ -10,6 +10,7 @@ import { NzTimePickerModule } from './nz-time-picker.module';
 
 import { registerLocaleData } from '@angular/common';
 import zh from '@angular/common/locales/zh';
+import { dispatchFakeEvent } from 'ng-zorro-antd/core';
 registerLocaleData(zh);
 
 describe('time-picker', () => {
@@ -87,6 +88,27 @@ describe('time-picker', () => {
       expect(testComponent.openChange).toHaveBeenCalledTimes(3);
       expect(testComponent.open).toBe(true);
     });
+    it('should open and close on enter', fakeAsync(() => {
+      testComponent.date = new Date('2018-11-11 11:11:11');
+      testComponent.open = false;
+      fixture.detectChanges();
+      testComponent.nzTimePickerComponent.inputRef.nativeElement.dispatchEvent(
+        new KeyboardEvent('keyup', { key: 'enter' })
+      );
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(testComponent.open).toBe(true);
+      const panel = overlayContainer.getContainerElement().querySelector('nz-time-picker-panel');
+      expect(panel).toBeTruthy();
+      if (panel) {
+        panel.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      }
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(testComponent.open).toBe(false);
+    }));
     it('should clear work', fakeAsync(() => {
       fixture.detectChanges();
       testComponent.date = new Date('2018-11-11 11:11:11');
@@ -102,6 +124,26 @@ describe('time-picker', () => {
       fixture.detectChanges();
       expect(testComponent.nzTimePickerComponent.nzFormat).toBe('h:mm:ss a');
     });
+    it('should be tabbable back to trigger wrapper', fakeAsync(() => {
+      testComponent.date = new Date('2018-11-11 11:11:11');
+      testComponent.open = true;
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(testComponent.open).toBe(true);
+
+      // It is impossible to simulate actual TAB behaviour using events.
+      // This is the next best thing.
+      dispatchFakeEvent(
+        overlayContainer.getContainerElement().querySelector('span.nz-tab-catching-span') as HTMLElement,
+        'focus'
+      );
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(testComponent.open).toBe(false);
+      expect(document.activeElement).toEqual(testComponent.nzTimePickerComponent.inputRef.nativeElement);
+    }));
   });
 });
 

components/time-picker/nz-time-picker.component.ts

@@ -143,6 +143,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   close(): void {
     this.nzOpen = false;
     this.nzOpenChange.emit(this.nzOpen);
+    this.focus();
   }
 
   updateAutoFocus(): void {