I mentioned this at the beginning of my answer on your previous question regarding specifying role="alert"
and aria-live="polite"
.
Your code sample is specifying conflicting information. Using role="alert" gives you an implicit aria-live="assertive" but you are also specifying aria-live="polite". I would recommend removing role="alert". Having aria-live="polite" is sufficient.
So the results are unkown when you specify two different values for aria-live. Assuming aria-live="assertive" takes precedence, the spec for assertive says:
User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.
So if you have multiple assertive messages, the previous assertive message might be cleared out by the next assertive message. (It's up to the individual assistive technology to decide. For example, JAWS might clear the previous message but NVDA might not.)
If you make your error message aria-live="polite", then you might hear all messages. It depends when the page refreshes and when the screen reader buffer updates. If you update the message in <error-component>
, and the screen reader buffer updates, and then you update the message in <error-component>
again and the screen reader buffer updates, then when there's a pause in the user's interaction, the queued up error messages should be read. But again, that might be a timing issue.
What happens visually when you have multiple error messages? Can you see all the messages at the same time, or do you briefly see one message and then it's overwritten by the next message?
If you create multiple visual <error-component>
elements so that you can see all the messages at the same time AND you make the container of those components an aria-live="polite", then you should hear all the errors.