Accessibility improvements (#1)

projects/angular-mentions/src/lib/mention-list.component.ts

@@ -18,23 +18,25 @@ import { getCaretCoordinates } from './caret-coords';
     <ng-template #defaultItemTemplate let-item="item">
       {{item[labelKey]}}
     </ng-template>
-    <ul #list [hidden]="hidden" class="dropdown-menu scrollable-menu"
+    <ul #list [hidden]="hidden" class="dropdown-menu scrollable-menu" role="listbox" [attr.aria-label]="listAriaLabel"
       [class.mention-menu]="!styleOff" [class.mention-dropdown]="!styleOff && dropUp">
-      <li *ngFor="let item of items; let i = index"
-        [class.active]="activeIndex==i" [class.mention-active]="!styleOff && activeIndex==i">
-        <a class="dropdown-item" [class.mention-item]="!styleOff"
+      <li *ngFor="let item of items; let i = index" role="option" tabindex="-1"
+        [class.active]="activeIndex==i" [class.mention-active]="!styleOff && activeIndex==i" [attr.aria-selected]="activeIndex==i">
+        <span class="dropdown-item" [class.mention-item]="!styleOff"
           (mousedown)="activeIndex=i;itemClick.emit();$event.preventDefault()">
           <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{'item':item}"></ng-template>
-        </a>
-      </li>s
+        </span>
+      </li>
     </ul>
   `,
   standalone: false
 })
 export class MentionListComponent implements AfterContentChecked {
   @Input() labelKey: string = 'label';
   @Input() itemTemplate: TemplateRef<any>;
+  @Input() listAriaLabel: string;
   @Output() itemClick = new EventEmitter();
+  @Output() itemActivated = new EventEmitter(true);
   @ViewChild('list', { static: true }) list: ElementRef;
   @ViewChild('defaultItemTemplate', { static: true }) defaultItemTemplate: TemplateRef<any>;
   items = [];
@@ -85,6 +87,7 @@ export class MentionListComponent implements AfterContentChecked {
   }
 
   activateNextItem() {
+    this.itemActivated.emit();
     // adjust scrollable-menu offset if the next item is out of view
     let listEl: HTMLElement = this.list.nativeElement;
     let activeEl = listEl.getElementsByClassName('active').item(0);
@@ -102,6 +105,7 @@ export class MentionListComponent implements AfterContentChecked {
   }
 
   activatePreviousItem() {
+    this.itemActivated.emit();
     // adjust the scrollable-menu offset if the previous item is out of view
     let listEl: HTMLElement = this.list.nativeElement;
     let activeEl = listEl.getElementsByClassName('active').item(0);

projects/angular-mentions/src/lib/mention-utils.ts

@@ -176,3 +176,7 @@ function localToRelativeCoordinates(
     }
   }
 }
+
+export function setAriaActiveDescendant(nativeElement: any, list: HTMLElement) {
+    nativeElement.ariaActiveDescendantElement = list.querySelector('[aria-selected="true"]');
+}

projects/angular-mentions/src/lib/mention.directive.ts

@@ -1,6 +1,6 @@
-import { ComponentFactoryResolver, Directive, ElementRef, TemplateRef, ViewContainerRef } from "@angular/core";
+import { Directive, ElementRef, TemplateRef, ViewContainerRef } from "@angular/core";
 import { EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
-import { getCaretPosition, getValue, insertValue, setCaretPosition } from './mention-utils';
+import { getCaretPosition, getValue, insertValue, setAriaActiveDescendant, setCaretPosition } from './mention-utils';
 
 import { MentionConfig } from "./mention-config";
 import { MentionListComponent } from './mention-list.component';
@@ -66,6 +66,8 @@ export class MentionDirective implements OnChanges {
   // template to use for rendering list items
   @Input() mentionListTemplate: TemplateRef<any>;
 
+  @Input() listAriaLabel = 'Suggestions';
+
   // event emitted whenever the search term changes
   @Output() searchTerm = new EventEmitter<string>();
 
@@ -88,7 +90,6 @@ export class MentionDirective implements OnChanges {
 
   constructor(
     private _element: ElementRef,
-    private _componentResolver: ComponentFactoryResolver,
     private _viewContainerRef: ViewContainerRef
   ) { }
 
@@ -350,22 +351,28 @@ export class MentionDirective implements OnChanges {
     if (this.searchList) {
       this.searchList.items = matches;
       this.searchList.hidden = matches.length == 0;
+      setTimeout(() => {
+          setAriaActiveDescendant(this._element.nativeElement, this.searchList.list.nativeElement);
+      }, 50);
     }
   }
 
   showSearchList(nativeElement: HTMLInputElement) {
     this.opened.emit();
 
     if (this.searchList == null) {
-      let componentFactory = this._componentResolver.resolveComponentFactory(MentionListComponent);
-      let componentRef = this._viewContainerRef.createComponent(componentFactory);
+      let componentRef = this._viewContainerRef.createComponent(MentionListComponent);
       this.searchList = componentRef.instance;
       this.searchList.itemTemplate = this.mentionListTemplate;
+      this.searchList.listAriaLabel = this.listAriaLabel;
       componentRef.instance['itemClick'].subscribe(() => {
         nativeElement.focus();
         let fakeKeydown = { key: 'Enter', keyCode: KEY_ENTER, wasClick: true };
         this.keyHandler(fakeKeydown, nativeElement);
       });
+      componentRef.instance['itemActivated'].subscribe(() => {
+        setAriaActiveDescendant(nativeElement, this.searchList.list.nativeElement);
+      });
     }
     this.searchList.labelKey = this.activeConfig.labelKey;
     this.searchList.dropUp = this.activeConfig.dropUp;