Merge pull request #6996 from IgniteUI/dmdimitrov/issue6845-8.2.x

fix(tabs): fixes and improvements on kb navigation and routing

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/core/utils.ts

@@ -158,7 +158,9 @@ export const enum KEYS {
     DOWN_ARROW = 'ArrowDown',
     DOWN_ARROW_IE = 'Down',
     F2 = 'F2',
-    TAB = 'Tab'
+    TAB = 'Tab',
+    HOME = 'Home',
+    END = 'End'
 }
 
 /**

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -11,7 +11,7 @@ import {
     AfterViewInit,
     OnDestroy
 } from '@angular/core';
-
+import { KEYS } from '../core/utils';
 import { IgxTabsGroupComponent } from './tabs-group.component';
 import { IgxTabItemBase, IgxTabsBase } from './tabs.common';
 import { IgxTabItemTemplateDirective } from './tabs.directives';
@@ -73,6 +73,13 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
         this._label = newValue;
     }
 
+    /**
+     * @hidden @internal
+     * Set to true when the tab item is automatically generated from the IgxTabsComponent when tab groups are defined.
+     */
+    @Input()
+    public autoGenerated: boolean;
+
     /**@hidden*/
     @ViewChild('defaultTabTemplate', { read: TemplateRef, static: true })
     protected defaultTabTemplate: TemplateRef<any>;
@@ -117,7 +124,7 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
      * @hidden @internal
      */
     @HostBinding('attr.tabindex')
-    public tabindex;
+    public tabindex = -1;
 
     /**
      * @hidden @internal
@@ -168,41 +175,82 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
      */
     @HostListener('click', ['$event'])
     public onClick(event) {
-        this.select();
-    }
-
-    /**
-     * @hidden
-     */
-    @HostListener('keydown.arrowright', ['$event'])
-    public onKeydownArrowRight(event: KeyboardEvent) {
-        this.onKeyDown(false);
+        if (this.autoGenerated) {
+            this.select();
+        }
     }
 
     /**
      * @hidden
      */
-    @HostListener('keydown.arrowleft', ['$event'])
-    public onKeydownArrowLeft(event: KeyboardEvent) {
-        this.onKeyDown(true);
-    }
+    @HostListener('keydown', ['$event'])
+    public onKeydown(event: KeyboardEvent) {
+        const tabsArray = this._tabs.tabs.toArray();
+        const startIndex = tabsArray.indexOf(this);
+        let finalIndex = -1;
+        let currentIndex = startIndex;
+
+        switch (event.key) {
+            case KEYS.RIGHT_ARROW:
+            case KEYS.RIGHT_ARROW_IE:
+                do {
+                    currentIndex++;
+                    if (currentIndex === tabsArray.length) {
+                        currentIndex = -1;
+                        continue;
+                    } else if ((tabsArray[currentIndex] as IgxTabItemComponent).disabled === false) {
+                        finalIndex = currentIndex;
+                        break;
+                    }
+                }
+                while (currentIndex !== startIndex);
+                break;
+            case KEYS.LEFT_ARROW:
+            case KEYS.LEFT_ARROW_IE:
+                do {
+                    currentIndex--;
+                    if (currentIndex === -1) {
+                        currentIndex = tabsArray.length;
+                        continue;
+                    } else if ((tabsArray[currentIndex] as IgxTabItemComponent).disabled === false) {
+                        finalIndex = currentIndex;
+                        break;
+                    }
+                }
+                while (currentIndex !== startIndex);
+                break;
+            case KEYS.HOME:
+                event.preventDefault();
+                finalIndex = tabsArray.find(t => (t as IgxTabItemComponent).disabled === false).index;
+                break;
+            case KEYS.END:
+                event.preventDefault();
+                finalIndex = tabsArray.slice().reverse().find(t => (t as IgxTabItemComponent).disabled === false).index;
+                break;
+            case KEYS.ENTER:
+                if (!this.autoGenerated) {
+                    this.nativeTabItem.nativeElement.click();
+                }
+                break;
+            case KEYS.SPACE:
+            case KEYS.SPACE_IE:
+                event.preventDefault();
+                if (!this.autoGenerated) {
+                    this.nativeTabItem.nativeElement.click();
+                }
+                break;
+            default:
+                break;
+        }
 
-    /**
-     * @hidden
-     */
-    @HostListener('keydown.home', ['$event'])
-    public onKeydownHome(event: KeyboardEvent) {
-        event.preventDefault();
-        this.onKeyDown(false, 0);
-    }
+        if (finalIndex > -1) {
+            const tab = tabsArray[finalIndex];
+            tab.nativeTabItem.nativeElement.focus();
 
-    /**
-     * @hidden
-     */
-    @HostListener('keydown.end', ['$event'])
-    public onKeydownEnd(event: KeyboardEvent) {
-        event.preventDefault();
-        this.onKeyDown(false, this._tabs.tabs.toArray().length - 1);
+            if (this.autoGenerated) {
+                tab.select();
+            }
+        }
     }
 
     /**
@@ -289,17 +337,6 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
         this.tabindex = newValue ? 0 : -1;
     }
 
-    private onKeyDown(isLeftArrow: boolean, index = null): void {
-        const tabsArray = this._tabs.tabs.toArray();
-        if (index === null) {
-            index = (isLeftArrow)
-                ? (this._tabs.selectedIndex === 0) ? tabsArray.length - 1 : this._tabs.selectedIndex - 1
-                : (this._tabs.selectedIndex === tabsArray.length - 1) ? 0 : this._tabs.selectedIndex + 1;
-        }
-        const tab = tabsArray[index];
-        tab.select();
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/tabs/tab-routing-test-guard.spec.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class TabRoutingTestGuard implements CanActivate {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+      if (state.url === '/view5') {
+           return false;
+        } else {
+            return true;
+        }
+    }
+}

projects/igniteui-angular/src/lib/tabs/tabs-routing-view-components.spec.ts

@@ -18,12 +18,26 @@ export class TabsRoutingView2Component {
 export class TabsRoutingView3Component {
 }
 
+@Component({
+    template: `This is a content from view component # 4`
+})
+export class TabsRoutingView4Component {
+}
+
+@Component({
+    template: `This is a content from view component # 5`
+})
+export class TabsRoutingView5Component {
+}
+
 /**
  * @hidden
  */
 @NgModule({
-    declarations: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
-    exports: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
+    declarations: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component,
+        TabsRoutingView4Component, TabsRoutingView5Component],
+    exports: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component,
+        TabsRoutingView4Component, TabsRoutingView5Component]
 })
 export class TabsRoutingViewComponentsModule {
 }

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

@@ -7,7 +7,7 @@
         <div class="igx-tabs__header-wrapper-fixed" #viewPort>
             <div #itemsContainer class="igx-tabs__header-wrapper-fluid">
                 <ng-container *ngIf="!hasContentTabs">
-                    <igx-tab-item igxRipple *ngFor="let group of groups" [relatedGroup]="group">
+                    <igx-tab-item igxRipple *ngFor="let group of groups" [relatedGroup]="group" [autoGenerated]="true">
                     </igx-tab-item>
                 </ng-container>
                 <ng-content select="igx-tab-item"></ng-content>
@@ -23,4 +23,4 @@
             <ng-content></ng-content>
         </div>
     </div>
-</div>
+</div>