Add overflow menu accessibility support

Author: youda97

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

@@ -1,6 +1,7 @@
-import { Component } from "@angular/core";
+import { Component, ViewChild, HostListener } from "@angular/core";
 import { Dialog } from "../dialog.component";
 import { position } from "../../utils/position";
+import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
 
 /**
  * Extend the `Dialog` component to create an overflow menu.
@@ -12,8 +13,7 @@ import { position } from "../../utils/position";
 	template: `
 		<ul
 			#dialog
-			class="bx--overflow-menu-options bx--overflow-menu-options--open"
-			tabindex="-1">
+			class="bx--overflow-menu-options bx--overflow-menu-options--open">
 			<ng-template
 				[ngTemplateOutlet]="dialogConfig.content"
 				[ngTemplateOutletContext]="{overflowMenu: this}">
@@ -22,6 +22,8 @@ import { position } from "../../utils/position";
 	`
 })
 export class OverflowMenuPane extends Dialog {
+	@ViewChild("dialog") dialog;
+
 	onDialogInit() {
 		/**
 		 *  -20 shifts the menu up to compensate for the
@@ -32,5 +34,61 @@ export class OverflowMenuPane extends Dialog {
 		 * so we need to add some compensation)
 		 */
 		this.addGap["bottom"] = pos => position.addOffset(pos, -20, 60);
+
+		setTimeout(() => {
+			this.listItems()[0].focus();
+		});
+	}
+
+	@HostListener("keydown", ["$event"])
+	hostkeys(event: KeyboardEvent) {
+		this.escapeClose(event);
+		const listItems = this.listItems();
+
+		switch (event.key) {
+			case "ArrowDown": {
+				event.preventDefault();
+				if (!isFocusInLastItem(event, listItems))  {
+					const index = listItems.findIndex(item => item === event.target);
+					listItems[index + 1].focus();
+				} else {
+					listItems[0].focus();
+				}
+				break;
+			}
+
+			case "ArrowUp": {
+				event.preventDefault();
+				if (!isFocusInFirstItem(event, listItems))  {
+					const index = listItems.findIndex(item => item === event.target);
+					listItems[index - 1].focus();
+				} else {
+					listItems[listItems.length - 1].focus();
+				}
+				break;
+			}
+
+			case "Home": {
+				event.preventDefault();
+				listItems[0].focus();
+				break;
+			}
+
+			case"End": {
+				event.preventDefault();
+				listItems[listItems.length - 1].focus();
+				break;
+			}
+			case "Enter":
+			case " ": {
+				this.doClose();
+			}
+		}
+	}
+
+	private listItems() {
+		const buttonClass = ".bx--overflow-menu-options__btn";
+		const disabledClass = ".bx--overflow-menu-options__option--disabled";
+		return Array.prototype.slice.call(this.dialog.nativeElement.querySelectorAll(`${buttonClass}:not(${disabledClass})`));
 	}
 }

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

@@ -21,7 +21,7 @@ import { Component } from "@angular/core";
 			placement="bottom"
 			class="bx--overflow-menu"
 			style="display: block;">
-			<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+			<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15" tabindex="0">
 				<g fill-rule="evenodd">
 					<circle cx="1.5" cy="1.5" r="1.5" />
 					<circle cx="1.5" cy="7.5" r="1.5" />

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

@@ -3,7 +3,8 @@ import {
 	ElementRef,
 	ViewContainerRef,
 	Input,
-	TemplateRef
+	TemplateRef,
+	HostListener
 } from "@angular/core";
 import { DialogDirective } from "./../dialog.directive";
 import { DialogService } from "./../dialog.service";
@@ -51,4 +52,16 @@ export class OverflowMenuDirective extends DialogDirective {
 	onDialogInit() {
 		this.dialogConfig.content = this.ibmOverflowMenu;
 	}
+
+	@HostListener("keydown", ["$event"])
+	hostkeys(event: KeyboardEvent) {
+
+		switch (event.key) {
+			case "Enter":
+			case " ": {
+				this.toggle();
+				break;
+			}
+		}
+	}
 }