Merge pull request #213 from youda97/overflow

 Fix DAP issues for overflow

Author: youda97

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

@@ -23,8 +23,10 @@ import {
 		<button
 			class="bx--overflow-menu-options__btn"
 			role="menuitem"
+			[tabindex]="tabIndex"
+			(focus)="tabIndex = 0"
+			(blur)="tabIndex = -1"
 			[disabled]="disabled"
-			[tabindex]="(disabled ? -1 : null)"
 			[title]="(titleEnabled ? content : '')">
 			<ng-content></ng-content>
 		</button>
@@ -52,6 +54,8 @@ export class OverflowMenuOption {
 	 */
 	@Input() disabled = false;
 
+	public tabIndex = -1;
+
 	constructor(private elementRef: ElementRef) {}
 
 	/**

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

@@ -1,7 +1,7 @@
-import { Component, ViewChild, HostListener, ElementRef } from "@angular/core";
+import { Component, HostListener, ElementRef } from "@angular/core";
 import { Dialog } from "../dialog.component";
 import { position } from "../../utils/position";
-import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
+import { getFocusElementList, isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
 import { I18n } from "./../../i18n/i18n.module";
 
 /**
@@ -17,7 +17,10 @@ import { I18n } from "./../../i18n/i18n.module";
 			[ngClass]="{'bx--overflow-menu--flip': dialogConfig.flip}"
 			role="menu"
 			#dialog
-			class="bx--overflow-menu-options bx--overflow-menu-options--open">
+			class="bx--overflow-menu-options bx--overflow-menu-options--open"
+			role="menu"
+			(focusout)="clickClose($event)"
+			[attr.aria-label]="dialogConfig.menuLabel">
 			<ng-template
 				[ngTemplateOutlet]="dialogConfig.content"
 				[ngTemplateOutletContext]="{overflowMenu: this}">
@@ -26,7 +29,6 @@ import { I18n } from "./../../i18n/i18n.module";
 	`
 })
 export class OverflowMenuPane extends Dialog {
-	@ViewChild("dialog") dialog;
 
 	constructor(protected elementRef: ElementRef, protected i18n: I18n) {
 		super(elementRef);
@@ -46,18 +48,25 @@ export class OverflowMenuPane extends Dialog {
 				return position.addOffset(pos, -20, -60);
 			}
 			return position.addOffset(pos, -20, 60);
-		}
+		};
 
 		if (!this.dialogConfig.menuLabel) {
 			this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
 		}
 
-		setTimeout(() => this.listItems()[0].focus());
+		setTimeout(() => {
+			getFocusElementList(this.elementRef.nativeElement).every(button => {
+				// Allows user to set tabindex to 0.
+				if (button.getAttribute("tabindex") === null) {
+					button.tabIndex = -1;
+				}
+			});
+			this.listItems()[0].focus();
+		}, 0);
 	}
 
 	@HostListener("keydown", ["$event"])
 	hostkeys(event: KeyboardEvent) {
-		this.escapeClose(event);
 		const listItems = this.listItems();
 
 		switch (event.key) {
@@ -92,10 +101,26 @@ export class OverflowMenuPane extends Dialog {
 				event.preventDefault();
 				listItems[listItems.length - 1].focus();
 				break;
+
+			case "Esc": // IE specific value
+			case "Escape":
+				event.stopImmediatePropagation();
+				this.doClose();
+				break;
+		}
+	}
+
+	clickClose(event) {
+		// Opens menu when clicking on the menu button and stays open while navigating through the options
+		if (this.dialogConfig.parentRef.nativeElement.firstChild.contains(event.target) ||
+			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

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