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.ts

@@ -397,6 +397,18 @@ export class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, On
  this._nativeElement.value = toString(value);
  }
 
+ private getAnnounceLocalizedMessage(count: number) {
+ 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);
  }