Merge branch 'master' of https://github.com/IBM/carbon-components-angular

Author: stanislavgeorgiev

package-lock.json

@@ -120,7 +120,6 @@
     "karma-sourcemap-loader": "0.3.7",
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "3.0.0",
-    "marked": "0.3.7",
     "node-sass": "4.9.0",
     "postcss-loader": "2.1.4",
     "raw-loader": "0.5.1",

package.json

@@ -30,7 +30,7 @@ export class Button implements OnInit {
 	 */
 	@Input() size: "normal" | "sm" = "normal";
 	// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
-	@HostBinding("class") btnClass = "bx--btn";
+	@HostBinding("class.bx--btn") baseClass = true;
 	@HostBinding("class.bx--btn--primary") primary = true;
 	@HostBinding("class.bx--btn--secondary") secondary = false;
 	@HostBinding("class.bx--btn--tertiary") tertiary = false;

src/button/button.directive.ts

@@ -1,7 +1,7 @@
 import {
 	Component,
 	Input,
-	OnInit,
+	OnInit
 } from "@angular/core";
 import { DateTimeModel } from "./../date-time-model.class";
 import { range } from "../../common/utils";

src/calendar/month-view/calendar-month.component.ts

@@ -1,7 +1,7 @@
 import {
 	Component,
 	Input,
-	OnInit,
+	OnInit
 } from "@angular/core";
 import { DateTimeModel } from "./../date-time-model.class";
 import { range } from "../../common/utils";

src/calendar/months-view/calendar-months.component.ts

@@ -2,7 +2,7 @@ import { TranslateService } from "@ngx-translate/core";
 import {
 	Component,
 	Input,
-	OnInit,
+	OnInit
 } from "@angular/core";
 import { DateTimeModel } from "./../date-time-model.class";
 import { range } from "../../common/utils";

src/calendar/quarter-view/calendar-quarter.component.ts

@@ -1,7 +1,7 @@
 import {
 	Component,
 	Input,
-	OnInit,
+	OnInit
 } from "@angular/core";
 import { DateTimeModel } from "./../date-time-model.class";
 import { range } from "../../common/utils";

src/calendar/year-view/calendar-year.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/dialog.component.ts

@@ -22,10 +22,8 @@ import {
 	template: `
 		<button
 			class="bx--overflow-menu-options__btn"
-			[ngClass]="{
-				'bx--overflow-menu-options__option--danger': type === 'danger',
-				'bx--overflow-menu-options__option--disabled': disabled
-			}"
+			role="menuitem"
+			[disabled]="disabled"
 			[tabindex]="(disabled ? -1 : null)"
 			[title]="(titleEnabled ? content : '')">
 			<ng-content></ng-content>
@@ -34,8 +32,17 @@ import {
 })
 export class OverflowMenuOption {
 	@HostBinding("class") optionClass = "bx--overflow-menu-options__option";
-	@HostBinding("attr.role") role = "list-item";
+	@HostBinding("attr.role") role = "presentation";
 
+	@HostBinding("class.bx--overflow-menu-options__option--danger")
+	public get isDanger(): Boolean {
+		return this.type === "danger";
+	}
+
+	@HostBinding("class.bx--overflow-menu-options__option--disabled")
+	public get isDisabled(): Boolean {
+		return this.disabled;
+	}
 	/**
 	 * toggles between `normal` and `danger` states
 	 */

src/dialog/overflow-menu/overflow-menu-option.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,51 @@ 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() {
+		return Array.from<any>(this.dialog.nativeElement.querySelectorAll(".bx--overflow-menu-options__btn:not([disabled])"));
 	}
 }