Accessibility issue with popup and aria-live

Question

I have a error message on which I am using aria-live = polite. It is announce the first time error is there. The second time it again announce if I open a popup on that same page and error has occurred in that page.

<div aria-live="polite">
<error-message-component></error-message-component>
</div>

I am not able to find why it is happening as it has been already announce to the user and content behind the popup has aria-hidden="true"

Answer 1

So the problem is that the error message (aria-live) is announced twice? The first time is expected, but if you open a popup, it's announced a second time?

If you are only specifying aria-live="polite" and are not specifying aria-relevant , then that means the aria-live region should be announced anytime you change text (add, remove, or change text) within the <div> (or any of its child DOM elements), or if you add child DOM elements (but not remove child DOM elements).

So you should confirm that when you display the popup, that no child DOM nodes are added to your aria-live region and that no text within the aria-live region is changed.

Also check if the aria-live region is somehow referenced by your popup. If something in your popup has an aria-labelledby or aria-describedby that points to the aria-live region, then the aria-live region will be announced as part of the popup.