From f89531abfc50ac869a32b20e46b3767f5725fbd7 Mon Sep 17 00:00:00 2001
From: Blackbaud-SandhyaRajasabeson <sandhya.rajasabeson@blackbaud.com>
Date: Thu, 29 Jun 2017 09:55:48 -0400
Subject: [PATCH] Tab keyboard support (#843)

* Added animation polypill

* Moved import to dependencies

* Tab keyboard accessibility
---
 package.json                               |  3 +-
 src/modules/tabs/tab-button.component.html |  2 +
 src/modules/tabs/tab-button.component.ts   |  6 +++
 src/modules/tabs/tabset.component.spec.ts  | 43 ++++++++++++++++++++++
 src/polyfills.ts                           |  2 +
 5 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8794152a9..afc159bcf 100644
--- a/package.json
+++ b/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",
diff --git a/src/modules/tabs/tab-button.component.html b/src/modules/tabs/tab-button.component.html
index 53fbda618..5cc52dfb6 100644
--- a/src/modules/tabs/tab-button.component.html
+++ b/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"
diff --git a/src/modules/tabs/tab-button.component.ts b/src/modules/tabs/tab-button.component.ts
index 2fd4a1cb0..4f5305721 100644
--- a/src/modules/tabs/tab-button.component.ts
+++ b/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();
+    }
+  }
 }
diff --git a/src/modules/tabs/tabset.component.spec.ts b/src/modules/tabs/tabset.component.spec.ts
index 05fe85a1d..b9935ba64 100644
--- a/src/modules/tabs/tabset.component.spec.ts
+++ b/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);
+    }
+    );
+  });
 });
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 8380c3148..85995666e 100644
--- a/src/polyfills.ts
+++ b/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 {