fix(tooltip): keyboard accessibility

Author: youda97

src/dialog/dialog.component.ts

@@ -146,7 +146,6 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			}
 		}
 		this.placeDialog();
-		dialogElement.focus();
 		const parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;
 		let node = parentEl;
 		let observables = [];
@@ -308,7 +307,9 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	 * @memberof Dialog
 	 */
 	ngOnDestroy() {
-		this.resizeSubscription.unsubscribe();
+		if (this.resizeSubscription) {
+			this.resizeSubscription.unsubscribe();
+		}
 		this.scrollSubscription.unsubscribe();
 	}
 }

src/dialog/dialog.service.ts

@@ -143,7 +143,7 @@ export class DialogService {
 	 * @param {any} [evt]
 	 * @memberof DialogService
 	 */
-	close(viewContainer: ViewContainerRef) {
+	close(viewContainer: ViewContainerRef, focusPreviouslyFocusedElement = true) {
 		this.isClosed.emit(true);
 
 		if (this.dialogRef) {
@@ -155,7 +155,9 @@ export class DialogService {
 			}
 			this.dialogRef = null;
 			this.isOpen = false;
-			elementToFocus.focus();
+			if (focusPreviouslyFocusedElement) {
+				elementToFocus.focus();
+			}
 
 			if (this.dialogSubscription) {
 				this.dialogSubscription.unsubscribe();

src/dialog/tooltip/tooltip.component.ts

@@ -1,7 +1,8 @@
 import {
 	Component,
 	TemplateRef,
-	HostBinding
+	HostBinding,
+	HostListener
 } from "@angular/core";
 import { Dialog } from "./../dialog.component";
 
@@ -15,7 +16,6 @@ import { Dialog } from "./../dialog.component";
 			#dialog
 			[id]="dialogConfig.compID"
 			role="tooltip"
-			tabindex="0"
 			class="bx--tooltip bx--tooltip--shown">
 			<span class="bx--tooltip__caret" aria-hidden="true"></span>
 			<ng-template
@@ -43,4 +43,9 @@ export class Tooltip extends Dialog {
 	onDialogInit() {
 		this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;
 	}
+
+	@HostListener("keydown", ["$event"])
+	onBlur(event: KeyboardEvent) {
+		this.doClose();
+	}
 }

src/dialog/tooltip/tooltip.directive.ts

@@ -6,7 +6,8 @@ import {
 	Injector,
 	ComponentFactoryResolver,
 	ViewContainerRef,
-	HostBinding
+	HostBinding,
+	HostListener
 } from "@angular/core";
 import { DialogDirective } from "./../dialog.directive";
 import { Tooltip } from "./tooltip.component";
@@ -51,7 +52,13 @@ export class TooltipDirective extends DialogDirective {
 	// tslint:disable-next-line:no-input-rename
 	@Input("tooltip-type") tooltipType: "warning" | "error" | "" = "";
 
-	@HostBinding("attr.aria-describedby") descriptorId: string;
+	@HostBinding("tabindex") tabIndex = 0;
+
+	@HostBinding("attr.aria-describedby") get descriptorId(): string {
+		if (this.expanded) {
+			return this.dialogConfig.compID;
+		}
+	}
 
 	/**
 	 * Creates an instance of `TooltipDirective`.
@@ -73,6 +80,21 @@ export class TooltipDirective extends DialogDirective {
 		this.dialogConfig.compID = "tooltip-" + TooltipDirective.tooltipCounter;
 		this.dialogConfig.content = this.ibmTooltip;
 		this.dialogConfig.type = this.tooltipType;
-		this.descriptorId = this.dialogConfig.compID;
+	}
+
+	close() {
+		this.dialogService.close(this.viewContainerRef, false);
+		this.expanded = false;
+	}
+
+	@HostListener("keydown", ["$event"])
+	onKeydown(event: KeyboardEvent) {
+		console.log(event.key);
+		if (this.trigger === "click" && (event.key === "Enter" || event.key === " " )) {
+			this.open();
+		}
+		if (event.key === "Escape") {
+			this.close();
+		}
 	}
 }