Merge pull request #322 from youda97/tooltip-focus

fix(tooltip): keyboard accessibility

Author: zvonimirfras

src/dialog/dialog.component.ts

@@ -19,7 +19,7 @@ import {
 import { throttleTime } from "rxjs/operators";
 // the AbsolutePosition is required to import the declaration correctly
 import position, { AbsolutePosition } from "./../utils/position";
-import { cycleTabs } from "./../common/tab.service";
+import { cycleTabs, getFocusElementList } from "./../common/tab.service";
 import { DialogConfig } from "./dialog-config.interface";
 
 
@@ -146,7 +146,9 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			}
 		}
 		this.placeDialog();
-		dialogElement.focus();
+		if (getFocusElementList(this.dialog.nativeElement).length > 0) {
+			dialogElement.focus();
+		}
 		const parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;
 		let node = parentEl;
 		let observables = [];

src/dialog/dialog.directive.ts

@@ -137,6 +137,14 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 		// fix for safari hijacking clicks
 		this.dialogService.singletonClickListen();
 
+		fromEvent(this.elementRef.nativeElement, "keydown").subscribe((event: KeyboardEvent) => {
+			// "Esc" is an IE specific value
+			if (event.target === this.dialogConfig.parentRef.nativeElement && (event.key === "Tab" || event.key === "Tab" && event.shiftKey) ||
+				event.key === "Escape" || event.key === "Esc") {
+				this.close();
+			}
+		});
+
 		// bind events for hovering or clicking the host
 		if (this.trigger === "hover" || this.trigger === "mouseenter") {
 			fromEvent(this.elementRef.nativeElement, "mouseenter").subscribe(() => this.toggle());
@@ -145,6 +153,12 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 			fromEvent(this.elementRef.nativeElement, "blur").subscribe(() => this.close());
 		} else {
 			fromEvent(this.elementRef.nativeElement, "click").subscribe(() => this.toggle());
+			fromEvent(this.elementRef.nativeElement, "keydown").subscribe((event: KeyboardEvent) => {
+				// "Spacebar" is an IE specific value
+				if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+					this.open();
+				}
+			});
 		}
 
 		// call onClose when the dialog is closed

src/dialog/tooltip/tooltip.component.ts

@@ -1,8 +1,11 @@
 import {
 	Component,
 	TemplateRef,
-	HostBinding
+	HostBinding,
+	Input
 } from "@angular/core";
+import { getFocusElementList } from "./../../common/tab.service";
+
 import { Dialog } from "./../dialog.component";
 
 /**
@@ -13,9 +16,9 @@ import { Dialog } from "./../dialog.component";
 	template: `
 		<div
 			#dialog
+			[tabindex]="tabIndex"
 			[id]="dialogConfig.compID"
 			role="tooltip"
-			tabindex="0"
 			class="bx--tooltip bx--tooltip--shown">
 			<span class="bx--tooltip__caret" aria-hidden="true"></span>
 			<ng-template
@@ -37,10 +40,13 @@ export class Tooltip extends Dialog {
 	 */
 	public hasContentTemplate = false;
 
+	@Input() tabIndex;
 	/**
 	 * Check whether there is a template for the `Tooltip` content.
 	 */
 	onDialogInit() {
 		this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;
+
+		this.tabIndex = getFocusElementList(this.dialog.nativeElement).length > 0 ? 0 : -1;
 	}
 }

src/dialog/tooltip/tooltip.directive.ts

@@ -51,6 +51,9 @@ export class TooltipDirective extends DialogDirective {
 	// tslint:disable-next-line:no-input-rename
 	@Input("tooltip-type") tooltipType: "warning" | "error" | "" = "";
 
+
+	@HostBinding("tabindex") tabIndex = 0;
+
 	@HostBinding("attr.aria-describedby") get descriptorId(): string {
 		return this.expanded ? this.dialogConfig.compID : null;
 	}