fix(typeahead): localize message for the live element

Enable localization for the live element.
Fixes #4560

src/index.ts

@@ -1,3 +1,5 @@
+import '@angular/localize/init';
+
 import { NgModule } from '@angular/core';
 
 import { NgbAccordionModule } from './accordion/accordion.module';

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));
  });
  }