fix(typeahead): use inline style for live element and localize message

Use inline style instead of the bootstrap class for the live element
to support the usage of the component in the shadow DOM and localize the message itself.
Fixes ng-bootstrap#4560

src/typeahead/typeahead.spec.ts

@@ -8,7 +8,7 @@ import { debounceTime, filter, map } from 'rxjs/operators';
 
 import { createGenericTestComponent, triggerEvent } from '../test/common';
 import { expectResults, getWindowLinks } from '../test/typeahead/common';
-import { ARIA_LIVE_DELAY } from '../util/accessibility/live';
+import { ARIA_LIVE_DELAY, Live } from '../util/accessibility/live';
 import { Key } from '../util/key';
 import { NgbTypeahead } from './typeahead';
 import { NgbTypeaheadConfig } from './typeahead-config';
@@ -64,10 +64,19 @@ function expectWindowResults(element, expectedResults: string[]) {
  expectResults(window, expectedResults);
 }
 
+let mockLiveService: Partial<Live>;
+
 describe('ngb-typeahead', () => {
  beforeEach(() => {
+ mockLiveService = {
+ say: jasmine.createSpy('say'),
+ };
+
  TestBed.configureTestingModule({
- providers: [{ provide: ARIA_LIVE_DELAY, useValue: null }],
+ providers: [
+ { provide: ARIA_LIVE_DELAY, useValue: null },
+ { provide: Live, useValue: mockLiveService },
+ ],
  });
  });
 
@@ -836,6 +845,37 @@ describe('ngb-typeahead', () => {
  expect(input.getAttribute('aria-owns')).toBeNull();
  expect(input.getAttribute('aria-activedescendant')).toBeNull();
  }));
+
+ it('should call the say method from the Live service with the correct message when there is more than one result', fakeAsync(() => {
+ const fixture = createTestComponent(`<input type="text" [(ngModel)]="model" [ngbTypeahead]="find"/>`);
+ const compiled = fixture.nativeElement;
+
+ tick();
+ changeInput(compiled, 'o');
+ fixture.detectChanges();
+ expectWindowResults(compiled, ['+one', 'one more']);
+ expect(mockLiveService.say).toHaveBeenCalledWith('2 results available');
+ }));
+
+ it('should call the say method from the Live service with the correct message when there is not any result available', fakeAsync(() => {
+ const fixture = createTestComponent(`<input type="text" [(ngModel)]="model" [ngbTypeahead]="find"/>`);
+ const compiled = fixture.nativeElement;
+
+ tick();
+ changeInput(compiled, 'a');
+ fixture.detectChanges();
+ expect(mockLiveService.say).toHaveBeenCalledWith('No results available');
+ }));
+
+ it('should call the say method from the Live service with the correct message when there is one single result available', fakeAsync(() => {
+ const fixture = createTestComponent(`<input type="text" [(ngModel)]="model" [ngbTypeahead]="find"/>`);
+ const compiled = fixture.nativeElement;
+
+ tick();
+ changeInput(compiled, 'one more');
+ fixture.detectChanges();
+ expect(mockLiveService.say).toHaveBeenCalledWith('1 result available');
+ }));
  });
 
  describe('hint', () => {

src/typeahead/typeahead.ts

@@ -397,6 +397,18 @@ export class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, On
  this._nativeElement.value = toString(value);
  }
 
+ private getAnnounceLocalizedMessage(count: number): string {
+ if (count === 0) {
+ return $localize`:@@ngb.typeahead.no-results:No results available`;
+ }
+
+ if (count === 1) {
+ return $localize`:@@ngb.typeahead.one-result:1 result available`;
+ }
+
+ return $localize`:@@ngb.typeahead.many-results:${count}:count: results available`;
+ }
+
  private _subscribeToUserInput(): void {
  const results$ = this._valueChanges$.pipe(
  tap((value) => {
@@ -443,7 +455,7 @@ export class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, On
 
  // live announcer
  const count = results ? results.length : 0;
- this._live.say(count === 0 ? 'No results available' : `${count} result${count === 1 ? '' : 's'} available`);
+ this._live.say(this.getAnnounceLocalizedMessage(count));
  });
  }
 

src/util/accessibility/live.ts

@@ -16,7 +16,7 @@ function getLiveElement(document: any, lazyCreate = false): HTMLElement | null {
  element.setAttribute('aria-live', 'polite');
  element.setAttribute('aria-atomic', 'true');
 
- element.classList.add('visually-hidden');
+ element.style.display = 'none';
 
  document.body.appendChild(element);
  }