How to prevent an HTML element from being focused in Angular?

Question

I have an issue with JAWS screen reader on IE browser. It reads the span tag with role="alert" twice. This issue does not occur on Firefox and Chrome. Also NVDA works fine with IE as well. Only JAWS with IE is giving the issue. After searching on internet I found the following from this site

role="alert" This should be used for important messages that should be read by a screen reader as soon as they appear. ARIA alerts can be useful when implemented correctly, but there are so many ways an alert can go wrong. A few examples:

A hidden element has role="alert" applied when the page loads, so the screen reader reads the alert immediately (even if it is visually hidden) instead of reading it when it appears.

Focus is set to the alert when it appears, so it is read twice (once because it is an alert and again because it has focus). ARIA alerts are triggered repeatedly, overwhelming a screen reader user.

I am guessing the above point is the reason for this.

Please help. I will add my Angular code sample if required.

Answer 1

You have several possible options but it is difficult to tell what is best without the code sample

Look at aria-hidden="isItIE" to get the screen reader to ignore the element if IE - isItIE would be true or false

or maybe don't make it a hidden element? Use an ngif and only show it conditionally after the page has loaded so it is not part of the dom at the start...again your condition can be based on whether the browser ie IE or not