Typeahead: accessibility issues

Bug description:

Typeahead component has accessibility issues. Code written in the html file:

<input id="typeahead" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />

Code evaluated in the html markup ( from browsers debug console):

<input _ngcontent-c4="" aria-multiline="false" autocapitalize="off" autocorrect="off" class="form-control ng-untouched ng-pristine ng-valid" id="typeahead" role="combobox" type="text" ng-reflect-ngb-typeahead="function (text$) {="off" aria-autocomplete="list" aria-expanded="false">

The HTML markup gives it role="combobox" and a property of aria-multiline="false".

However, according to https://www.w3.org/TR/wai-aria-1.1/#combobox, combobox has no arrtibute of type ‘aria-multiline’ because of which it is failing the axe accessibility test saying that the aria attribute is not allowed.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/angular/dnbxerkrvpap?file=app%2Ftypeahead-basic.html

(check the markup generated by the browser)

Versions of Angular, ng-bootstrap and Bootstrap:

Angular CLI: 7.0.6:

ng-bootstrap: 3.3.1

Bootstrap:4.1.1

[aleMaqueda]

Try removing the attribute :

<input type="text" class="form-control" #mainSearch
  [(ngModel)]="currentSearch"  
  [ngbTypeahead]="autocomplete" placeholder="" 
  [resultFormatter]="resultFormatter"
  [inputFormatter]="inputFormatter"
  (selectItem)="selectSuggestion($event)">

@ViewChild('mainSearch') searchInputText: ElementRef;
 constructor(private renderer: Renderer2) {}

 ngAfterViewInit(): void {
     if (this.searchInputText !== undefined ) {
         this.renderer.removeAttribute(this.searchInputText.nativeElement, 'aria-multiline');
     }
 }

[DutchKevv]

Is this gonna be fixed? It doesn’t seem like a huge change