Fix DAP issues for overflow

Author: youda97

src/dialog/overflow-menu/overflow-menu-option.component.ts

@@ -23,16 +23,18 @@ import {
 		<button
 			class="bx--overflow-menu-options__btn"
 			role="menuitem"
+			tabindex="-1"
+			(focus)="onFocus()"
+			(blur)="onBlur()"
 			[disabled]="disabled"
-			[tabindex]="(disabled ? -1 : null)"
 			[title]="(titleEnabled ? content : '')">
 			<ng-content></ng-content>
 		</button>
 	`
 })
 export class OverflowMenuOption {
 	@HostBinding("class") optionClass = "bx--overflow-menu-options__option";
-	@HostBinding("attr.role") role = "presentation";
+	@HostBinding("attr.role") role = "none";
 
 	@HostBinding("class.bx--overflow-menu-options__option--danger")
 	public get isDanger(): Boolean {
@@ -73,4 +75,12 @@ export class OverflowMenuOption {
 	get content(): string {
 		return this.elementRef.nativeElement.querySelector("button").textContent;
 	}
+
+	onFocus() {
+		this.elementRef.nativeElement.querySelector("button").tabIndex = "0";
+	}
+
+	onBlur() {
+		this.elementRef.nativeElement.querySelector("button").tabIndex = "-1";
+	}
 }

src/dialog/overflow-menu/overflow-menu-pane.component.ts

@@ -1,4 +1,5 @@
-import { Component, ViewChild, HostListener, ElementRef } from "@angular/core";
+import { OverflowMenuOption } from "./overflow-menu-option.component";
+import { Component, HostListener, ElementRef, QueryList, AfterViewInit } from "@angular/core";
 import { Dialog } from "../dialog.component";
 import { position } from "../../utils/position";
 import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
@@ -13,19 +14,18 @@ import { I18n } from "./../../i18n/i18n.module";
 	selector: "ibm-overflow-menu-pane",
 	template: `
 		<ul
+			class="bx--overflow-menu-options bx--overflow-menu-options--open"
 			role="menu"
-			[attr.aria-label]="dialogConfig.menuLabel"
-			#dialog
-			class="bx--overflow-menu-options bx--overflow-menu-options--open">
+			(focusout)="clickClose($event)"
+			[attr.aria-label]="dialogConfig.menuLabel">
 			<ng-template
 				[ngTemplateOutlet]="dialogConfig.content"
 				[ngTemplateOutletContext]="{overflowMenu: this}">
 			</ng-template>
 		</ul>
 	`
 })
-export class OverflowMenuPane extends Dialog {
-	@ViewChild("dialog") dialog;
+export class OverflowMenuPane extends Dialog implements AfterViewInit {
 
 	constructor(protected elementRef: ElementRef, protected i18n: I18n) {
 		super(elementRef);
@@ -86,10 +86,22 @@ export class OverflowMenuPane extends Dialog {
 				event.preventDefault();
 				listItems[listItems.length - 1].focus();
 				break;
+
+			case "Tab":
+				this.doClose();
+		}
+	}
+
+	clickClose(event) {
+		if (event.target === this.dialogConfig.parentRef.nativeElement.firstChild ||
+			this.listItems().some(button => button === (event.relatedTarget)) ||
+			(event.type === "focusout" && event.relatedTarget === this.dialogConfig.parentRef.nativeElement)) {
+			return;
 		}
+		this.doClose();
 	}
 
 	private listItems() {
-		return Array.from<any>(this.dialog.nativeElement.querySelectorAll(".bx--overflow-menu-options__btn:not([disabled])"));
+		return Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--overflow-menu-options__btn:not([disabled])"));
 	}
 }

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -21,7 +21,6 @@ import { I18n } from "./../../i18n/i18n.module";
 			[ngClass]="{'bx--overflow-menu--open': open === true}"
 			[attr.aria-label]="buttonLabel"
 			class="bx--overflow-menu"
-			role="button"
 			placement="bottom"
 			style="display: block;"
 			tabindex="0">

src/dialog/overflow-menu/overflow-menu.stories.ts

@@ -18,7 +18,7 @@ storiesOf("Overflow Menu", module)
 				</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
 				<li class="bx--overflow-menu-options__option">
-					<button class="bx--overflow-menu-options__btn">A fully custom option</button>
+					<button class="bx--overflow-menu-options__btn" tabindex="-1">A fully custom option</button>
 				</li>
 				<ibm-overflow-menu-option>Option 4</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>