Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
typeahead adds <div aria-live> element to body but does not remove it
See original GitHub issueBug 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:
- open https://ng-bootstrap.github.io/#/components/tooltip/examples
- check that the div is not present in the bottom of body element
- navigate to typeahead
- check that it was added
- navigate back to tooltip
- 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Typeahead and screenreaders - jquery
If I add focus to the element, then the blodhound modal window closes, which will not work. What I have so far: var...
Read more >ARIA live regions - Accessibility - MDN Web Docs - Mozilla
Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive...
Read more >Using aria-live dynamically
1: Adding a new element with aria-live="assertive" to the DOM dynamically: WORKS ... Clicking the button below adds a new div with aria-live="assertive"...
Read more >Provide name, role, and value information
Provide an accessible role for each custom component. WAI-ARIA defines a large number of values for the role attribute, which are used by...
Read more >WAI-ARIA Best Practices
Is it clear how to use tabindex and keyboard commands to implement focus ... WAI-ARIA markup is currently not included in (X)HTML.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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;forsr-only. We won’t remove it, because it is there for a11y support.I’m facing the same issue than @valentinabojan . How can I get rid of it?