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';
@@ -65,9 +65,18 @@ function expectWindowResults(element, expectedResults: string[]) {
 }
 
 describe('ngb-typeahead', () => {
+ let mockLiveService: Partial<Live>;
+
  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,41 @@ describe('ngb-typeahead', () => {
  expect(input.getAttribute('aria-owns')).toBeNull();
  expect(input.getAttribute('aria-activedescendant')).toBeNull();
  }));
+
+ describe('live', () => {
+ let fixture: ComponentFixture<TestComponent>;
+ let compiled: any;
+
+ beforeEach(() => {
+ fixture = createTestComponent(`<input type="text" [(ngModel)]="model" [ngbTypeahead]="find"/>`);
+ compiled = fixture.nativeElement;
+ });
+
+ it('should call the method with the correct message when there is more than one result', fakeAsync(() => {
+ tick();
+ changeInput(compiled, 'o');
+ fixture.detectChanges();
+
+ expectWindowResults(compiled, ['+one', 'one more']);
+ expect(mockLiveService.say).toHaveBeenCalledWith('2 results available');
+ }));
+
+ it('should call the method with the correct message when there is not any result available', fakeAsync(() => {
+ tick();
+ changeInput(compiled, 'a');
+ fixture.detectChanges();
+
+ expect(mockLiveService.say).toHaveBeenCalledWith('No results available');
+ }));
+
+ it('should call the method with the correct message when there is one single result available', fakeAsync(() => {
+ 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);
  }