Merge pull request #177 from cal-smith/a11y

Fix DAP issues for combobox and dropdown

Author: zvonimirfras

src/combobox/combobox.component.ts

@@ -61,14 +61,11 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			</div>
 			<input
 				[disabled]="disabled"
-				[attr.aria-expanded]="open"
 				(click)="toggleDropdown()"
 				(keyup)="onSearch($event.target.value)"
 				[value]="selectedValue"
 				class="bx--text-input"
 				aria-label="ListBox input field"
-				role="combobox"
-				aria-autocomplete="list"
 				autocomplete="off"
 				placeholder="Filter..."/>
 			<div
@@ -200,7 +197,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	@ContentChild(AbstractDropdownView) view: AbstractDropdownView;
 	@ViewChild("dropdownMenu") dropdownMenu;
 	@HostBinding("class") class = "bx--combo-box bx--list-box";
-	@HostBinding("attr.role") role = "listbox";
+	@HostBinding("attr.role") role = "combobox";
 	@HostBinding("style.display") display = "block";
 
 	public open = false;

src/dropdown/dropdown.component.ts

@@ -4,19 +4,16 @@ import {
 	Output,
 	EventEmitter,
 	ElementRef,
-	ViewEncapsulation,
 	ContentChild,
 	OnInit,
 	ViewChild,
 	AfterContentInit,
-	AfterViewInit,
 	HostListener,
-	forwardRef,
-	OnDestroy,
-	HostBinding
+	OnDestroy
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
+// Observable import is required here so typescript can compile correctly
 import { Observable, fromEvent, of, Subscription } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 

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

@@ -53,7 +53,10 @@ import { ScrollableList } from "./../scrollable-list.directive";
 @Component({
 	selector: "ibm-dropdown-list",
 	template: `
-		<ul #list class="bx--list-box__menu">
+		<ul
+			#list
+			role="listbox"
+			class="bx--list-box__menu">
 			<li tabindex="{{item.disabled? -1 : 0}}"
 				role="option"
 				*ngFor="let item of displayItems"
@@ -72,7 +75,8 @@ import { ScrollableList } from "./../scrollable-list.directive";
 						type="checkbox"
 						[checked]="item.selected"
 						[disabled]="item.disabled"
-						(click)="doClick($event, item)">
+						(click)="doClick($event, item)"
+						tabindex="-1">
 					<label class="bx--checkbox-label">{{item.content}}</label>
 				</div>
 				<ng-container *ngIf="!listTpl && type === 'single'">{{item.content}}</ng-container>