feat(month picker): add KB to month picker component #3126

IgniteUI · Feb 13, 2019 · 40d65ba · 40d65ba
1 parent 59b0db5
commit 40d65ba
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/README.md b/projects/igniteui-angular/src/lib/calendar/README.md
@@ -70,7 +70,7 @@ When the **igxCalendar** component is focused:
 - `Tab` will navigate through the subheader buttons;
 
 When `prev` or `next` month buttons (in the subheader) are focused:
-- `Space` will scroll into view the next or previous month.
+- `Space` or `Enter` will scroll into view the next or previous month.
 
 When `months` button (in the subheader) is focused:
 - `Space` or `Enter` will open the months view.

diff --git a/projects/igniteui-angular/src/lib/month-picker/month-picker.component.html b/projects/igniteui-angular/src/lib/month-picker/month-picker.component.html
@@ -1,14 +1,14 @@
-<div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body">
+<div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
     <div class="igx-calendar-picker">
-        <div class="igx-calendar-picker__prev" (click)="previousYear()">
+        <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div>
-            <span (click)="activeViewDecade()" class="igx-calendar-picker__date">
+            <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
                 {{ formattedYear(viewDate) }}
             </span>
         </div>
-        <div class="igx-calendar-picker__next" (click)="nextYear()">
+        <div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="nextYearKB($event)">
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>
     </div>

diff --git a/projects/igniteui-angular/src/lib/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/month-picker/month-picker.component.ts
@@ -1,14 +1,17 @@
 import {
     Component,
     NgModule,
-    HostListener
+    HostListener,
+    ElementRef,
+    ViewChild
 } from '@angular/core';
 import { IgxCalendarModule, CalendarView, IgxCalendarComponent } from '../calendar/index';
 import { IgxIconModule } from '../icon/index';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { trigger, transition, useAnimation } from '@angular/animations';
 import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../animations/main';
+import { KEYS } from '../core/utils';
 
 @Component({
     providers: [
@@ -51,6 +54,12 @@ export class IgxMonthPickerComponent extends IgxCalendarComponent {
      */
     public yearAction = '';
 
+    /**
+     * @hidden
+     */
+    @ViewChild('yearsBtn')
+    public yearsBtn: ElementRef;
+
     /**
      * @hidden
      */
@@ -66,6 +75,18 @@ export class IgxMonthPickerComponent extends IgxCalendarComponent {
         super.nextYear();
     }
 
+    /**
+     * @hidden
+     */
+    public nextYearKB(event) {
+        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            this.nextYear();
+        }
+    }
+
     /**
      * @hidden
      */
@@ -74,6 +95,18 @@ export class IgxMonthPickerComponent extends IgxCalendarComponent {
         super.previousYear();
     }
 
+    /**
+     * @hidden
+     */
+    public previousYearKB(event) {
+        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            this.previousYear();
+        }
+    }
+
     /**
      * @hidden
      */
@@ -90,6 +123,10 @@ export class IgxMonthPickerComponent extends IgxCalendarComponent {
     public selectYear(event: Date) {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = CalendarView.DEFAULT;
+
+        requestAnimationFrame(() => {
+            this.yearsBtn.nativeElement.focus();
+        });
     }
 
     /**