Merge branch 'master' into AlertModalComponent

Author: zvonimirfras

src/button-menu/button-menu-item.component.spec.ts

@@ -35,7 +35,7 @@ describe("Button Menu", () => {
 						provide: TranslateLoader, useClass: TranslateFakeLoader
 					}
 				})
-			],
+			]
 		});
 	});
 

src/checkbox/checkbox.module.ts

@@ -11,10 +11,10 @@ export { CheckboxComponent } from "./checkbox.component";
 
 @NgModule({
 	declarations: [
-		CheckboxComponent,
+		CheckboxComponent
 	],
 	exports: [
-		CheckboxComponent,
+		CheckboxComponent
 	],
 	imports: [
 		CommonModule,

src/combobox/combobox.module.ts

@@ -12,7 +12,7 @@ export { ComboBox } from "./combobox.component";
 
 @NgModule({
 	declarations: [
-		ComboBox,
+		ComboBox
 	],
 	exports: [
 		ComboBox,

src/content-switcher/content-switcher.component.ts

@@ -22,7 +22,7 @@ import { ContentSwitcherOption } from "./content-switcher-option.directive";
 			role="tablist">
 			<ng-content></ng-content>
 		</div>
-	`,
+	`
 })
 export class ContentSwitcher implements AfterViewInit {
 	@Input() label = "content switcher";

src/content-switcher/content-switcher.stories.ts

@@ -1,7 +1,6 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withNotes } from "@storybook/addon-notes";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+import { withKnobs } from "@storybook/addon-knobs/angular";
 
 import { ContentSwitcherModule } from "../";
 
@@ -10,7 +9,7 @@ storiesOf("Content Switcher", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				ContentSwitcherModule,
+				ContentSwitcherModule
 			]
 		})
 	)

src/dialog/dialog.component.ts

@@ -8,7 +8,7 @@ import {
 	OnInit,
 	AfterViewInit,
 	OnDestroy,
-	HostListener,
+	HostListener
 } from "@angular/core";
 import {
 	Observable,
@@ -17,7 +17,7 @@ import {
 	merge
 } from "rxjs";
 import { throttleTime } from "rxjs/operators";
-import position, { AbsolutePosition } from "../utils/position";
+import position from "../utils/position";
 import { cycleTabs } from "./../common/tab.service";
 import { DialogConfig } from "./dialog-config.interface";
 
@@ -103,7 +103,7 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 		"top": pos => position.addOffset(pos, -this.dialogConfig.gap),
 		"bottom": pos => position.addOffset(pos, this.dialogConfig.gap),
 		"left-bottom": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),
-		"right-bottom": pos => position.addOffset(pos, 0, this.dialogConfig.gap),
+		"right-bottom": pos => position.addOffset(pos, 0, this.dialogConfig.gap)
 	};
 
 	/**
@@ -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/dialog.service.ts

@@ -5,7 +5,7 @@ import {
 	ComponentFactory,
 	ComponentFactoryResolver,
 	Injectable,
-	ViewContainerRef,
+	ViewContainerRef
 } from "@angular/core";
 import { Subscription } from "rxjs";
 import { DialogConfig } from "./dialog-config.interface";

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" />