Tab keyboard support (#843)

* Added animation polypill

* Moved import to dependencies

* Tab keyboard accessibility

package.json

@@ -57,7 +57,8 @@
     "ng2-dragula": "1.3.1",
     "ng2-toastr": "4.0.1",
     "rxjs": "5.4.0",
-    "zone.js": "0.8.10"
+    "zone.js": "0.8.10",
+    "web-animations-js": "2.2.5"
   },
   "devDependencies": {
     "@angular/compiler-cli": "4.1.3",

src/modules/tabs/tab-button.component.html

@@ -6,6 +6,8 @@
       'sky-btn-tab-disabled': disabled,
       'sky-tab-btn-closeable': allowClose
     }"
+    tabindex="0"
+    (keydown)="keyDownFunction($event)"
     (click)="doTabClick()"
     role="tab"
     [attr.aria-selected]="active"

src/modules/tabs/tab-button.component.ts

@@ -44,4 +44,10 @@ export class SkyTabButtonComponent {
   public doCloseClick() {
     this.closeClick.emit(undefined);
   }
+
+  public keyDownFunction(event: any) {
+    if (event.keyCode === 13) {
+      this.doTabClick();
+    }
+  }
 }

src/modules/tabs/tabset.component.spec.ts

@@ -16,6 +16,12 @@ import { TestUtility } from '../testing/testutility';
 
 import { expect } from '../testing';
 
+import {
+  DebugElement
+} from '@angular/core';
+
+import { By } from '@angular/platform-browser';
+
 describe('Tabset component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -656,4 +662,41 @@ describe('Tabset component', () => {
       });
     });
   });
+
+   describe('keyboard accessibility', () => {
+    let debugElement: DebugElement;
+    let cmp: TabsetTestComponent;
+    let fixture: ComponentFixture<TabsetTestComponent>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          SkyTabsFixturesModule
+        ]
+      });
+      fixture = TestBed.createComponent(TabsetTestComponent);
+      debugElement = fixture.debugElement;
+      cmp = fixture.componentInstance as TabsetTestComponent;
+    });
+
+    it('should have tabindex of 0', () => {
+      fixture.detectChanges();
+      expect(debugElement.query(By.css('.sky-btn-tab')).attributes['tabindex']).toBe('0');
+    });
+
+    it('should emit a click event on enter press', () => {
+      fixture.detectChanges();
+      fixture.detectChanges();
+      let el =  debugElement.queryAll(By.css('.sky-btn-tab'))[1];
+
+      el.triggerEventHandler('keydown', { keyCode: 15});
+      fixture.detectChanges();
+      validateTabSelected(fixture.nativeElement, 0);
+
+      el.triggerEventHandler('keydown', { keyCode: 13});
+      fixture.detectChanges();
+      validateTabSelected(fixture.nativeElement, 1);
+    }
+    );
+  });
 });

src/polyfills.ts

@@ -17,6 +17,8 @@ import 'ts-helpers';
 import 'intl';
 import 'intl/locale-data/jsonp/en';
 
+import 'web-animations-js/web-animations.min';
+
 // if ('production' === ENV) {
   // Production
 // } else {