Merge pull request #94 from youda97/master

Add overflow menu accessibility support

Author: zvonimirfras

src/dialog/dialog.component.ts

@@ -241,6 +241,7 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	@HostListener("keydown", ["$event"])
 	escapeClose(event: KeyboardEvent) {
 		switch (event.key) {
+			case "Esc": // IE specific value
 			case "Escape": {
 				event.stopImmediatePropagation();
 				this.doClose();

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

@@ -22,6 +22,7 @@ import {
 	template: `
 		<button
 			class="bx--overflow-menu-options__btn"
+			role="menuitem"
 			[ngClass]="{
 				'bx--overflow-menu-options__option--danger': type === 'danger',
 				'bx--overflow-menu-options__option--disabled': disabled
@@ -34,7 +35,7 @@ import {
 })
 export class OverflowMenuOption {
 	@HostBinding("class") optionClass = "bx--overflow-menu-options__option";
-	@HostBinding("attr.role") role = "list-item";
+	@HostBinding("attr.role") role = "presentation";
 
 	/**
 	 * toggles between `normal` and `danger` states

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.
@@ -11,9 +12,10 @@ import { position } from "../../utils/position";
 	selector: "ibm-overflow-menu-pane",
 	template: `
 		<ul
+			role="menu"
+			attr.aria-label="{{'OVERFLOW_MENU.OVERFLOW' | translate}}"
 			#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 +24,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 +36,53 @@ 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 "Down": // IE specific value
+			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 "Up": // IE specific value
+			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;
+		}
+	}
+
+	private listItems() {
+		const buttonClass = ".bx--overflow-menu-options__btn";
+		const disabledClass = ".bx--overflow-menu-options__option--disabled";
+		return Array.from<any>(this.dialog.nativeElement.querySelectorAll(`${buttonClass}:not(${disabledClass})`));
 	}
 }

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

@@ -18,9 +18,12 @@ import { Component } from "@angular/core";
 		<div
 			[ibmOverflowMenu]="options"
 			[appendToBody]="true"
-			placement="bottom"
+			attr.aria-label="{{'OVERFLOW_MENU.OVERFLOW' | translate}}"
 			class="bx--overflow-menu"
-			style="display: block;">
+			role="button"
+			placement="bottom"
+			style="display: block;"
+			tabindex="0">
 			<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
 				<g fill-rule="evenodd">
 					<circle cx="1.5" cy="1.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,14 @@ 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;
+		}
+	}
 }