I have:
<div aria-live="polite" id="signInIdError"
*ngIf="!signInId.valid && (signInId.touched || isSubmitted)"
class="inline-validation critical">
<p>{{ "FYPVERROR" | translate }}</p>
</div>
The issue is, when the error shows up dynamically on field validation, the error is read non-stop and not just once.
How to make this work? I have tried assigning div role='region' with aria-live="polite" as well as just aria-live="polite" and it doesn't seem to be working.
I had similar issue. I tried implementing aria-live and ngIf on different elements and worked for me.
In your case, this code might work:
<div id="signInIdError" class="inline-validation critical"
*ngIf="Condition"> <p aria-live="polite"> Some Text </p>
</div>