feat(typeahead): improved accessibility #582

src/typeahead/typeahead-container.component.html

@@ -10,12 +10,15 @@
 <ng-template #bs3Template>
   <ul class="dropdown-menu"
       #ulElement
+      role="listbox"
       [style.overflow-y]="needScrollbar ? 'scroll': 'auto'"
       [style.height]="needScrollbar ? guiHeight: 'auto'">
     <ng-template ngFor let-match let-i="index" [ngForOf]="matches">
       <li #liElements *ngIf="match.isHeader()" class="dropdown-header">{{ match }}</li>
       <li #liElements
           *ngIf="!match.isHeader()"
+          [id]="popupId + '-' + i"
+          role="option"
           [@typeaheadAnimation]="animationState"
           [class.active]="isActive(match)"
           (mouseenter)="selectActive(match)">
@@ -35,6 +38,8 @@
     <h6 *ngIf="match.isHeader()" class="dropdown-header">{{ match }}</h6>
     <ng-template [ngIf]="!match.isHeader()">
       <button #liElements
+              [id]="popupId + '-' + i"
+              role="option"
               [@typeaheadAnimation]="animationState"
               class="dropdown-item"
               (click)="selectMatch(match, $event)"

src/typeahead/typeahead-container.component.ts

@@ -9,7 +9,9 @@ import {
   Renderer2,
   TemplateRef,
   ViewChild,
-  ViewChildren
+  ViewChildren,
+  Output,
+  EventEmitter
 } from '@angular/core';
 
 import { isBs3, Utils } from 'ngx-bootstrap/utils';
@@ -21,6 +23,8 @@ import { TypeaheadDirective } from './typeahead.directive';
 import { typeaheadAnimation } from './typeahead-animations';
 import { Subscription } from 'rxjs';
 
+let nextWindowId = 0;
+
 @Component({
   selector: 'typeahead-container',
   templateUrl: './typeahead-container.component.html',
@@ -30,7 +34,8 @@ import { Subscription } from 'rxjs';
     '[style.height]': `isBs4 && needScrollbar ? guiHeight: 'auto'`,
     '[style.visibility]': 'hidden',
     '[class.dropup]': 'dropup',
-    style: 'position: absolute;display: block;'
+    style: 'position: absolute;display: block;',
+    '[attr.role]': `isBs4 ? 'listbox' : null `
   },
   styles: [
     `
@@ -46,7 +51,11 @@ import { Subscription } from 'rxjs';
   ],
   animations: [typeaheadAnimation]
 })
+
 export class TypeaheadContainerComponent implements OnDestroy {
+   // tslint:disable-next-line: no-output-rename
+  @Output('activeChange') activeChangeEvent = new EventEmitter();
+
   parent: TypeaheadDirective;
   query: string[] | string;
   isFocused = false;
@@ -60,6 +69,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
   animationState: string;
   positionServiceSubscription: Subscription;
   height = 0;
+  popupId = `ngb-typeahead-${nextWindowId++}`;
 
   get isBs4(): boolean {
     return !isBs3();
@@ -80,6 +90,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
     public element: ElementRef,
     private changeDetectorRef: ChangeDetectorRef
   ) {
+    this.element.nativeElement.id = this.popupId;
     this.positionServiceSubscription = this.positionService.event$.subscribe(
       () => {
         if (this.isAnimated) {
@@ -99,6 +110,11 @@ export class TypeaheadContainerComponent implements OnDestroy {
     return this._active;
   }
 
+  set active(active: TypeaheadMatch) {
+    this._active = active;
+    this.activeChanged();
+  }
+
   get matches(): TypeaheadMatch[] {
     return this._matches;
   }
@@ -120,7 +136,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
     }
 
     if (this.typeaheadIsFirstItemActive && this._matches.length > 0) {
-      this._active = this._matches[0];
+      this.active = this._matches[0];
 
       if (this._active.isHeader()) {
         this.nextActiveMatch();
@@ -136,7 +152,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
         return;
       }
 
-      this._active = null;
+      this.active = null;
     }
   }
 
@@ -183,10 +199,16 @@ export class TypeaheadContainerComponent implements OnDestroy {
     }
   }
 
+  activeChanged(): void {
+    const index = this.matches.indexOf(this._active);
+    this.activeChangeEvent.emit(`${this.popupId}-${index}`);
+  }
+
   prevActiveMatch(): void {
+
     const index = this.matches.indexOf(this._active);
 
-    this._active = this.matches[
+    this.active = this.matches[
       index - 1 < 0 ? this.matches.length - 1 : index - 1
     ];
 
@@ -202,10 +224,11 @@ export class TypeaheadContainerComponent implements OnDestroy {
   nextActiveMatch(): void {
     const index = this.matches.indexOf(this._active);
 
-    this._active = this.matches[
+    this.active = this.matches[
       index + 1 > this.matches.length - 1 ? 0 : index + 1
     ];
 
+
     if (this._active.isHeader()) {
       this.nextActiveMatch();
     }
@@ -217,7 +240,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
 
   selectActive(value: TypeaheadMatch): void {
     this.isFocused = true;
-    this._active = value;
+    this.active = value;
   }
 
   highlight(match: TypeaheadMatch, query: string[] | string): string {
@@ -264,7 +287,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
   }
 
   isActive(value: TypeaheadMatch): boolean {
-    return this._active === value;
+    return this.active === value;
   }
 
   selectMatch(value: TypeaheadMatch, e: Event = void 0): boolean {

src/typeahead/typeahead.directive.ts

@@ -24,7 +24,16 @@ import { TypeaheadConfig } from './typeahead.config';
 import { getValueFromObject, latinize, tokenize } from './typeahead-utils';
 import { debounceTime, filter, mergeMap, switchMap, toArray } from 'rxjs/operators';
 
-@Directive({selector: '[typeahead]', exportAs: 'bs-typeahead'})
+@Directive({
+  selector: '[typeahead]',
+  exportAs: 'bs-typeahead',
+  host: {
+    '[attr.aria-activedescendant]': 'activeDescendant',
+    '[attr.aria-aria-owns]': 'isOpen ? this._container.popupId : null',
+    '[attr.aria-aria-expanded]': 'isOpen',
+    '[attr.aria-autocomplete]': 'list'
+  }
+})
 export class TypeaheadDirective implements OnInit, OnDestroy {
   /** options source, can be Array of strings, objects or
    * an Observable for external matching process
@@ -134,6 +143,9 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   /**  if false don't focus the input element the typeahead directive is associated with on selection */
     // @Input() protected typeaheadFocusOnSelect:boolean;
 
+  activeDescendant: string;
+  popupId: string;
+  isOpen = false;
   _container: TypeaheadContainerComponent;
   isActiveItemChanged = false;
   isTypeaheadOptionsListActive = false;
@@ -360,13 +372,21 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
 
     this._container.matches = this._matches;
     this.element.nativeElement.focus();
+
+    this._container.activeChangeEvent.subscribe((activeId: string) => {
+      this.activeDescendant = activeId;
+      this.changeDetection.markForCheck();
+    });
+    this.isOpen = true;
   }
 
   hide(): void {
     if (this._typeahead.isShown) {
       this._typeahead.hide();
       this._outsideClickListener();
       this._container = null;
+      this.isOpen = false;
+      this.changeDetection.markForCheck();
     }
   }