fix(dropdown): keyboard interactions and DAP issues

Author: youda97

src/dropdown/dropdown.component.ts

@@ -274,15 +274,17 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.
 	 */
 	@HostListener("keydown", ["$event"])
+	// "Esc", "Spacebar", "Down", and "up" are IE specific values
 	onKeyDown(event: KeyboardEvent) {
-		if (event.key === "Escape" && !this.menuIsClosed) {
+		if (event.key === "Escape" || event.key === "Esc" && !this.menuIsClosed) {
 			event.stopImmediatePropagation();  // don't unintentionally close other widgets that listen for Escape
 		}
-		if (event.key === "Escape" || (event.key === "ArrowUp" && event.altKey)) {
+		if (event.key === "Escape" || event.key === "Esc") {
 			event.preventDefault();
 			this.closeMenu();
 			this.dropdownButton.nativeElement.focus();
-		} else if (event.key === "ArrowDown" && event.altKey) {
+		} else if (this.menuIsClosed && event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" ||
+			event.key === "Spacebar" || event.key === "Down" || event.key === "Up") {
 			event.preventDefault();
 			this.openMenu();
 		}
@@ -303,12 +305,13 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	}
 
 	closedDropdownNavigation(event) {
-		if (event.key === "ArrowDown") {
+		// "Down", and "Up" are IE specific values
+		if (event.key === "ArrowDown" || event.key === "Down") {
 			event.preventDefault();
 			this.view.getCurrentItem().selected = false;
 			let item = this.view.getNextItem();
 			if (item) { item.selected = true; }
-		} else if (event.key === "ArrowUp") {
+		} else if (event.key === "ArrowUp" || event.key === "Up") {
 			event.preventDefault();
 			this.view.getCurrentItem().selected = false;
 			let item = this.view.getPrevItem();
@@ -362,10 +365,11 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.
 	 */
 	_keyboardNav(event: KeyboardEvent) {
-		if (event.key === "Escape" && !this.menuIsClosed) {
+		// "Esc" is an IE specific value
+		if (event.key === "Escape" || event.key === "Esc" && !this.menuIsClosed) {
 			event.stopImmediatePropagation();  // don't unintentionally close modal if inside of it
 		}
-		if (event.key === "Escape" || (event.key === "ArrowUp" && event.altKey)) {
+		if (event.key === "Escape" || event.key === "Esc") {
 			event.preventDefault();
 			this.closeMenu();
 			this.dropdownButton.nativeElement.focus();
@@ -456,7 +460,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 		document.body.firstElementChild.addEventListener("keydown", this.noop, true);
 		document.addEventListener("click", this.outsideClick, true);
 		document.addEventListener("keydown", this.outsideKey, true);
-		// setTimeout(() => this.view.initFocus(), 0);
+		setTimeout(() => this.view.initFocus(), 0);
 	}
 
 	/**

src/dropdown/list/dropdown-list.component.spec.ts

@@ -6,6 +6,7 @@ import { StaticIconModule } from "./../../icon/static-icon.module";
 import { DropdownList } from "./dropdown-list.component";
 import { ListItem } from "./../list-item.interface";
 import { ScrollableList } from "./../scrollable-list.directive";
+import { I18nModule } from "../../i18n/i18n.module";
 
 @Component({
 	template: `<ibm-dropdown-list [items]="items" (select)="onSelect($event)"></ibm-dropdown-list>`
@@ -39,7 +40,7 @@ describe("Dropdown list", () => {
 				ScrollableList
 			],
 			imports: [
-				StaticIconModule
+				StaticIconModule, I18nModule
 			]
 		});
 	});
@@ -72,7 +73,7 @@ describe("Dropdown multi list", () => {
 				ScrollableList
 			],
 			imports: [
-				StaticIconModule
+				StaticIconModule, I18nModule
 			]
 		});
 	});

src/dropdown/list/dropdown-list.component.ts

@@ -12,6 +12,7 @@ import {
 	ElementRef
 } from "@angular/core";
 
+import { I18n } from "../../i18n/i18n.module";
 import { AbstractDropdownView } from "./../abstract-dropdown-view.class";
 import { ListItem } from "./../list-item.interface";
 import { watchFocusJump } from "./../dropdowntools";
@@ -49,12 +50,15 @@ import { ScrollableList } from "./../scrollable-list.directive";
 		<ul
 			#list
 			role="listbox"
-			class="bx--list-box__menu">
-			<li tabindex="{{item.disabled? -1 : 0}}"
+			class="bx--list-box__menu"
+			[attr.aria-label]="dropdownListLabel">
+			<li tabindex="-1"
 				role="option"
-				*ngFor="let item of displayItems"
+				*ngFor="let item of displayItems; let i = index"
 				(click)="doClick($event, item)"
 				(keydown)="doKeyDown($event, item)"
+				(focus)="listElementList[i].classList.add('bx--list-box__menu-item--highlighted'); listElementList[i].tabIndex = 0"
+				(blur)="listElementList[i].classList.remove('bx--list-box__menu-item--highlighted'); listElementList[i].tabIndex = -1"
 				class="bx--list-box__menu-item"
 				[ngClass]="{
 					selected: item.selected,
@@ -88,6 +92,7 @@ import { ScrollableList } from "./../scrollable-list.directive";
 	]
 }) // conceptually this extends list-group, but we dont have to
 export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChanges, OnDestroy {
+	@Input() dropdownListLabel = this.i18n.get().DROPDOWN_LIST.LABEL;
 	/**
 	 * The list items belonging to the `DropdownList`.
 	 */
@@ -139,7 +144,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChan
 	/**
 	 * Creates an instance of `DropdownList`.
 	 */
-	constructor(public elementRef: ElementRef) {}
+	constructor(public elementRef: ElementRef, protected i18n: I18n) {}
 
 	/**
 	 * Updates list when changes occur within the items belonging to the `DropdownList`.
@@ -353,24 +358,24 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChan
 	 * Manages the keyboard accessiblity for navigation and selection within a `DropdownList`.
 	 */
 	doKeyDown(event: KeyboardEvent, item: ListItem) {
-		if (event.key && (event.key === "Enter" || event.key === " ")) {
+		// "Spacebar", "Down", and "Up" are IE specific values
+		if (event.key && event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
 			event.preventDefault();
-			this.doClick(event, item);
-		} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			if (event.key === "Enter") {
+				this.doClick(event, item);
+			}
+		} else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Down" || event.key === "Up") {
 			event.preventDefault();
 			// this.checkScrollArrows();
-			if (event.key === "ArrowDown" && this.hasNextElement()) {
+			if (event.key === "ArrowDown" || event.key === "Down" && this.hasNextElement()) {
 				this.getNextElement().focus();
-			} else if (event.key === "ArrowUp") {
+			} else if (event.key === "ArrowUp" || event.key === "Up") {
 				if (this.hasPrevElement()) {
 					this.getPrevElement().focus();
 				} else if (this.getSelected()) {
 					this.clearSelected.nativeElement.focus();
 				}
 			}
-			if (event.shiftKey) {
-				(event.target as HTMLElement).click();
-			}
 		}
 	}
 

src/i18n/en.json

@@ -71,6 +71,9 @@
 			"RESET_SEARCH": "Reset search"
 		}
 	},
+	"DROPDOWN_LIST": {
+		"LABEL": "Listbox"
+	},
 	"LOADING": {
 		"TITLE": "Loading"
 	},

src/modal/modal-placeholder.component.ts

@@ -54,7 +54,7 @@ export class ModalPlaceholder implements OnInit {
 	 * Initializes the component using `ModalService`.
 	 */
 	ngOnInit() {
-		console.warn("`ibm-modal-placeholder` has been deprecated in favour of `ibm-placeholder`");
+		console.warn("`ibm-dialog-placeholder` has been deprecated in favour of `ibm-placeholder`");
 		this.placeholderService.registerViewContainerRef(this.viewContainerRef);
 	}
 }