typeahead adds

Bug description:

The first time a typeahead component is created, an element <div aria-live="polite" aria-atomic="true" class="sr-only"></div> gets added to body.

This element never gets removed, even if the typeahead component is destroyed.

Link to minimally-working plunker that reproduces the issue:

Your demo itself shows the issue:

  1. open https://ng-bootstrap.github.io/#/components/tooltip/examples
  2. check that the div is not present in the bottom of body element
  3. navigate to typeahead
  4. check that it was added
  5. navigate back to tooltip
  6. check that it is still present

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.5
ng-bootstrap: 2.1.0
Bootstrap: 4.1.1

Additional information

Introduced in f65b8a4#diff-4b999ef7b06784feb23d420f3d909d1a

1 possible answer(s) on “typeahead adds
element to body but does not remove it”

  1. @valentinabojan it’s due to the class="sr-only"; it should be hidden.

    I don’t think you’re adding Bootstrap CSS properly / have a very custom bootstrap CSS build. I suggest you fix this, not try to hide the element.

    Otherwise just add display: none; for sr-only. We won’t remove it, because it is there for a11y support.