Merge pull request #249 from youda97/contentswitcher-dap

fix(content-switcher): DAP Issues

Author: zvonimirfras

src/content-switcher/content-switcher-option.directive.ts

@@ -15,6 +15,7 @@ export class ContentSwitcherOption {
 		this._active = value;
 		this.selectedClass = value;
 		this.ariaSelected = value;
+		this.tabindex = value ? "0" : "-1";
 	}
 
 	get active() {
@@ -29,6 +30,7 @@ export class ContentSwitcherOption {
 	@HostBinding("class.bx--content-switcher--selected") selectedClass = false;
 	@HostBinding("attr.role") role = "tab";
 	@HostBinding("attr.aria-selected") ariaSelected = false;
+	@HostBinding("attr.tabIndex") tabindex = "-1";
 
 	protected _active = false;
 
@@ -37,4 +39,16 @@ export class ContentSwitcherOption {
 		this.active = true;
 		this.selected.emit(true);
 	}
+
+	@HostListener("focus")
+	onFocus() {
+		this.active = true;
+	}
+
+	@HostListener("blur", ["$event"])
+	onBlur(event) {
+		if (event.relatedTarget) {
+			this.active = false;
+		}
+	}
 }

src/content-switcher/content-switcher.component.ts

@@ -5,9 +5,12 @@ import {
 	QueryList,
 	Output,
 	EventEmitter,
-	AfterViewInit
+	AfterViewInit,
+	HostListener,
+	ElementRef
 } from "@angular/core";
 import { ContentSwitcherOption } from "./content-switcher-option.directive";
+import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 
 /**
  *
@@ -31,7 +34,10 @@ export class ContentSwitcher implements AfterViewInit {
 
 	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;
 
+	constructor(protected elementRef: ElementRef) {}
+
 	ngAfterViewInit() {
+		this.options.first.active = true;
 		this.options.forEach(option => {
 			option.selected.subscribe(_ => {
 				const active = option;
@@ -44,4 +50,43 @@ export class ContentSwitcher implements AfterViewInit {
 			});
 		});
 	}
+
+	@HostListener("keydown", ["$event"])
+	hostkeys(event: KeyboardEvent) {
+		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--content-switcher-btn"));
+
+		switch (event.key) {
+			case "Right": // IE specific value
+			case "ArrowRight":
+				event.preventDefault();
+				if (!isFocusInLastItem(event, buttonList))  {
+					const index = buttonList.findIndex(item => item === event.target);
+					buttonList[index + 1].focus();
+				} else {
+					buttonList[0].focus();
+				}
+				break;
+
+			case "Left": // IE specific value
+			case "ArrowLeft":
+				event.preventDefault();
+				if (!isFocusInFirstItem(event, buttonList))  {
+					const index = buttonList.findIndex(item => item === event.target);
+					buttonList[index - 1].focus();
+				} else {
+					buttonList[buttonList.length - 1].focus();
+				}
+				break;
+
+			case "Home":
+				event.preventDefault();
+				buttonList[0].focus();
+				break;
+
+			case "End":
+				event.preventDefault();
+				buttonList[buttonList.length - 1].focus();
+				break;
+		}
+	}
 }