feat(IgxMonthView): add one tab stop in the month view #6275

Author: ddincheva

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html

@@ -1,6 +1,6 @@
 <div class="igx-calendar__body">
     <div class="igx-calendar__body-row--wrap">
-        <div [igxCalendarMonth]="month" [date]="date" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i; trackBy: monthTracker">
+        <div [igxCalendarMonth]="month" [date]="date" [attr.tabindex]="activeMonth === month.getMonth() ? 0 : -1" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i; trackBy: monthTracker">
             {{ formattedMonth(month) | titlecase }}
         </div>
     </div>

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -48,7 +48,14 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
      * @memberof IgxMonthsViewComponent
      */
     @Input()
-    public date = new Date();
+    public set date(value) {
+        this._date = value;
+        this.activeMonth = this.date.getMonth();
+    }
+
+    public get date() {
+        return this._date;
+    }
 
     /**
      * Gets the month format option of the months view.
@@ -134,10 +141,11 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
 
 
     /**
-     * The default `tabindex` attribute for the component.
+     * Gets/sets the `tabindex` attribute for the component.
+     * Default value is 0
      *
-     * @hidden
      */
+    @Input()
     @HostBinding('attr.tabindex')
     public tabindex = 0;
 
@@ -161,6 +169,13 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         return result;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public activeMonth;
+
+    private _date = new Date();
     /**
      * @hidden
      */
@@ -214,6 +229,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         this.onSelection.emit(event);
 
         this.date = event;
+        this.activeMonth = this.date.getMonth();
         this._onChangeCallback(this.date);
     }
 
@@ -274,7 +290,9 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
             const nextNodeRect = months[index].nativeElement.getBoundingClientRect();
             const tolerance = 6;
             if (nodeRect.top !== nextNodeRect.top && (nextNodeRect.left - nodeRect.left) < tolerance) {
-                months[index].nativeElement.focus();
+                const month = months[index];
+                month.nativeElement.focus();
+                this.activeMonth = month.value.getMonth();
                 break;
             }
         }
@@ -300,7 +318,9 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
             const nextNodeRect = months[index].nativeElement.getBoundingClientRect();
             const tolerance = 6;
             if (nextNodeRect.top !== nodeRect.top && (nodeRect.left - nextNodeRect.left) < tolerance ) {
-                months[index].nativeElement.focus();
+                const month = months[index];
+                month.nativeElement.focus();
+                this.activeMonth = month.value.getMonth();
                 break;
             }
         }
@@ -320,7 +340,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         const months = this.monthsRef.toArray();
         if (months.indexOf(node) + 1 < months.length) {
             const month = months[months.indexOf(node) + 1];
-
+            this.activeMonth = month.value.getMonth();
             month.nativeElement.focus();
         }
     }
@@ -339,7 +359,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         const months = this.monthsRef.toArray();
         if (months.indexOf(node) - 1 >= 0) {
             const month = months[months.indexOf(node) - 1];
-
+            this.activeMonth = month.value.getMonth();
             month.nativeElement.focus();
         }
     }
@@ -353,7 +373,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         event.stopPropagation();
 
         const month = this.monthsRef.toArray()[0];
-
+        this.activeMonth = month.value.getMonth();
         month.nativeElement.focus();
     }
 
@@ -367,7 +387,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
 
         const months = this.monthsRef.toArray();
         const month = months[months.length - 1];
-
+        this.activeMonth = month.value.getMonth();
         month.nativeElement.focus();
     }
 
@@ -378,8 +398,13 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
     public onKeydownEnter(event) {
         const value = this.monthsRef.find((date) => date.nativeElement === event.target).value;
         this.date = new Date(value.getFullYear(), value.getMonth(), this.date.getDate());
-
+        this.activeMonth = this.date.getMonth();
         this.onSelection.emit(this.date);
         this._onChangeCallback(this.date);
     }
+
+    @HostListener('focusout', ['$event'])
+    public resetActiveMonth(event) {
+        this.activeMonth = this.date.getMonth();
+    }
 }