Calendar keyboard navigation improvements

CHANGELOG.md

@@ -30,15 +30,17 @@ All notable changes for each version of this project will be documented in this
     - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
-- `IgxDatePicker`	
+- `IgxDatePicker`
     - **Breaking Change** - Deprecated the `label` property.
     - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
 - `igxNavigationDrawer`
     - Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
 - `igxTabs`
     - Added `disableAnimation` property which enables/disables the transition animation of the tabs' content. Set to `false` by default.
 - `IgxExpansionPanel`
-    - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. 
+    - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel.
+- `IgxCalendarComponent`, `IgxMonthsViewComponent` and `IgxYearsViewComponent`
+    - `tabIndex` property was removed  in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the `IgxMonthsViewComponent` and `IgxYearsViewComponent`;
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

@@ -554,6 +554,45 @@ describe('Multi-View Calendar - ', () => {
             HelperTestFunctions.verifyCalendarSubHeaders(fixture, [march2020, april2020, may2020]);
         }));
 
+        it('Verify tabindex is correct when navigating with arrow keys', fakeAsync(() => {
+            calendar.hideOutsideDays = true;
+            fixture.detectChanges();
+
+            let dates = HelperTestFunctions.getMonthViewDates(fixture, 0);
+            UIInteractions.simulateClickEvent(dates[0]);
+            fixture.detectChanges();
+            tick();
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', dates[0]);
+            fixture.detectChanges();
+            tick();
+            dates = HelperTestFunctions.getMonthViewDates(fixture, 0);
+            expect(document.activeElement).toEqual(dates[7]);
+            expect(dates[7].tabIndex).toBe(0);
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', dates[7]);
+            fixture.detectChanges();
+            tick();
+            dates = HelperTestFunctions.getMonthViewDates(fixture, 0);
+            expect(document.activeElement).toEqual(dates[0]);
+            expect(dates[0].tabIndex).toBe(0);
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', dates[0]);
+            fixture.detectChanges();
+            tick();
+            dates = HelperTestFunctions.getMonthViewDates(fixture, 0);
+            expect(document.activeElement).toEqual(dates[1]);
+            expect(dates[1].tabIndex).toBe(0);
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', dates[1]);
+            fixture.detectChanges();
+            tick();
+            dates = HelperTestFunctions.getMonthViewDates(fixture, 0);
+            expect(document.activeElement).toEqual(dates[0]);
+            expect(dates[0].tabIndex).toBe(0);
+        }));
+
+
         it('Verify navigation with pageUp', fakeAsync(() => {
             let monthDates = HelperTestFunctions.getMonthViewDates(fixture, 1);
             UIInteractions.simulateClickEvent(monthDates[16]);
@@ -694,17 +733,19 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
             inactiveDates = HelperTestFunctions.getMonthViewInactiveDates(fixture, 0);
             inactiveDates.forEach(date => {
-                expect(date.tabIndex).toEqual(0);
+                expect(date.tabIndex).toEqual(-1);
             });
 
             monthDates = HelperTestFunctions.getMonthViewDates(fixture, 0);
             for (let index = 6; index < 14; index++) {
-                expect(monthDates[index].tabIndex).toEqual(0);
+                expect(monthDates[index].tabIndex).toEqual(-1);
 
             }
+
+            expect(monthDates[0].tabIndex).toEqual(0);
         }));
 
-        it('Verify navigation with Home and End keys', fakeAsync(() => {
+        it('Verify navigation with Home and End keys and check the tabindex', fakeAsync(() => {
             let monthDates = HelperTestFunctions.getMonthViewDates(fixture, 1);
             UIInteractions.simulateClickEvent(monthDates[16]);
             fixture.detectChanges();
@@ -716,13 +757,17 @@ describe('Multi-View Calendar - ', () => {
 
             monthDates = HelperTestFunctions.getMonthViewDates(fixture, 0);
             expect(document.activeElement).toEqual(monthDates[0]);
+            expect(monthDates[0].tabIndex).toEqual(0);
+
 
             UIInteractions.triggerKeyDownEvtUponElem('End', monthDates[0], true);
             fixture.detectChanges();
             tick();
 
             monthDates = HelperTestFunctions.getMonthViewDates(fixture, 2);
             expect(document.activeElement).toEqual(monthDates[monthDates.length - 1]);
+            expect(monthDates[monthDates.length - 1].tabIndex).toEqual(0);
+
         }));
 
         it('Verify navigation with Home and End keys when there are disabled dates', fakeAsync(() => {

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

@@ -50,6 +50,7 @@ <h2 class="igx-calendar__header-date">
                 [selection]="selection"
                 [locale]="locale"
                 [value]="value"
+                [(activeDate)]="activeDate"
                 [viewDate]="i | IgxGetViewDate:viewDate"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
@@ -59,7 +60,8 @@ <h2 class="igx-calendar__header-date">
                 [hideOutsideDays]="hideOutsideDays"
                 [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
-                (onDateSelection)="childClicked($event)">
+                (onDateSelection)="childClicked($event)"
+                (monthsViewBlur)="resetActiveDate()">
         </igx-days-view>
     </div>
 </div>

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

@@ -191,15 +191,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public callback: (next) => void;
 
-    /**
-     * The default `tabindex` attribute for the component.
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     /**
      * The default aria role attribute for the component.
      *
@@ -402,6 +393,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         return this.selectedDates ? this.selectedDates : new Date();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public activeDate = new Date().toLocaleDateString();
+
     /**
      * @hidden
      * @internal
@@ -492,10 +489,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public nextMonth(isKeydownTrigger = false) {
         if (isKeydownTrigger && this.animationAction === 'prev') { return; }
+        this.isKeydownTrigger = isKeydownTrigger;
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
-        this.isKeydownTrigger = isKeydownTrigger;
     }
 
     /**
@@ -556,7 +553,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         requestAnimationFrame(() => {
             if (this.dacadeView) {
                 this.dacadeView.date = args;
-                this.dacadeView.el.nativeElement.focus();
+                this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus();
             }
         });
     }
@@ -571,7 +568,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         requestAnimationFrame(() => {
             if (this.dacadeView) {
                 this.dacadeView.date = args;
-                this.dacadeView.el.nativeElement.focus();
+                this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus();
             }
         });
     }
@@ -732,6 +729,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
              (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
             this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
+        if (!this.isKeydownTrigger) {
+            this.resetActiveDate();
+        }
 
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
             this.scrollMonth$.next();
@@ -768,6 +768,21 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public resetActiveDate() {
+        if (!this.monthViews) { return; }
+        let dates = [];
+        this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray()); });
+        const date = dates.find(day => day.selected && day.isCurrentMonth) || dates.find(day => day.isToday && day.isCurrentMonth)
+            || dates.find(d => d.isFocusable);
+        if (date) {
+            this.activeDate = date.date.date.toLocaleDateString();
+        }
+    }
+
     /**
      * Keyboard navigation of the calendar
      * @hidden
@@ -781,7 +796,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             return;
         }
 
-
         const isPageDown = event.key === 'PageDown';
         const step = isPageDown ? 1 : -1;
         let monthView = this.daysView as IgxDaysViewComponent;

projects/igniteui-angular/src/lib/calendar/calendar.directives.ts

@@ -48,10 +48,22 @@ export class IgxCalendarYearDirective {
         return this.isCurrentYear;
     }
 
+    @HostBinding('attr.tabindex')
+    public get tabIndex(): number {
+        return this.isCurrentYear ? 0 : -1;
+    }
+
+
     public get isCurrentYear(): boolean {
         return this.date.getFullYear() === this.value.getFullYear();
     }
 
+    public get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+
+    constructor(public elementRef: ElementRef) {}
+
     @HostListener('click')
     public onClick() {
         this.onYearSelection.emit(this.value);
@@ -75,9 +87,6 @@ export class IgxCalendarMonthDirective {
     @Output()
     public onMonthSelection = new EventEmitter<Date>();
 
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     @HostBinding('class.igx-calendar__month')
     public get defaultCSS(): boolean {
         return !this.isCurrentMonth;

projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts

@@ -155,18 +155,14 @@ export class IgxDayItemComponent {
         return this.selection !== CalendarSelection.RANGE;
     }
 
-    @HostBinding('attr.tabindex')
-    public get tabindex(): number {
-        return this.isDisabled || this.isHidden ? -1 : 0;
-    }
-
     private _selected = false;
 
     constructor(private elementRef: ElementRef) { }
 
-    @HostListener('click')
-    @HostListener('keydown.enter')
-    public onSelect() {
+    @HostListener('click', ['$event'])
+    @HostListener('keydown.enter', ['$event'])
+    public onSelect(event) {
+        event.stopPropagation();
         this.onDateSelection.emit(this.date);
     }
 }

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

@@ -27,6 +27,8 @@
         [specialDates]="specialDates"
         [outOfRangeDates]="outOfRangeDates"
         [hideOutsideDays]="hideOutsideDays"
+        [attr.tabindex]="tabIndex(day)"
+        (focus)="activeDate = day.date.toLocaleDateString()"
         (onDateSelection)="selectDay($event)">
         {{ formattedDate(day.date) }}
     </igx-day-item>