Add focus to dialog with tabbable content inside

Author: youda97

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,6 +146,9 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			}
 		}
 		this.placeDialog();
+		if (getFocusElementList(this.dialog.nativeElement).length > 0) {
+			dialogElement.focus();
+		}
 		const parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;
 		let node = parentEl;
 		let observables = [];

src/dialog/tooltip/tooltip.component.ts

@@ -2,8 +2,11 @@ import {
 	Component,
 	TemplateRef,
 	HostBinding,
-	HostListener
+	HostListener,
+	Input
 } from "@angular/core";
+import { getFocusElementList } from "./../../common/tab.service";
+
 import { Dialog } from "./../dialog.component";
 
 /**
@@ -14,6 +17,7 @@ import { Dialog } from "./../dialog.component";
 	template: `
 		<div
 			#dialog
+			[tabindex]="tabIndex"
 			[id]="dialogConfig.compID"
 			role="tooltip"
 			class="bx--tooltip bx--tooltip--shown">
@@ -37,10 +41,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;
 	}
 }