Form errors that screen reader can access in angular form

Question

Basically i want the inline form errors to be announced. I have following kind of form in angular 7

 <form testForm="ngForm">
    <input type="text" id="email" name="email" #email="ngModal" 
       aria-labelledby="emailReqError emailPatternError">
    // Error handling part
    <span *ngIf="email.errors?.required" id="emailReqError">
     Please enter Email
    </span>
    <span *ngIf="email.errors?.pattern" id="emailPatternError">
      Please enter valid email address
    </span> 
    <button type="submit" (click)="login(testForm)">Sign In</button>
 </form>

Somehow pattern inline error is not announced when user typing invalid email address. This error is display in UI when user typing.. same thing i want for the screen reader to announce this error. I also tried aria-live="assertive" but it seems not working for the pattern span. I am using chromevox screenreader.

Answer 1

Try alert role

<form testForm="ngForm">
    <input type="text" id="email" name="email" #email="ngModal" 
       aria-labelledby="emailReqError emailPatternError">
    // Error handling part
    <span role="alert" *ngIf="email.errors?.required" id="emailReqError">
     Please enter Email
    </span>
    <span role="alert" *ngIf="email.errors?.pattern" 
     id="emailPatternError">
      Please enter valid email address
    </span> 
    <button type="submit" (click)="login(testForm)">Sign In</button>
 </form>