In the Forms component - summary of errors:
- I assume a typo in
arialive="polite", there is a missing hyphen. It should be aria-live="polite"
- Now there are also conflicting roles; I see
role="none" and aria-live="polite
Here the role="none" indicates the element has no semantic meaning.
Solution:
Use role="alert" for immediate error notifications or role="status" for less urgent statusmessages. role="status/alert" have implied aria-live-values
<div class="notification" role="alert">
In the Forms component - summary of errors:
arialive="polite", there is a missing hyphen. It should bearia-live="polite"role="none"andaria-live="politeHere the role="none" indicates the element has no semantic meaning.
Solution:
Use
role="alert"for immediate error notifications or role="status" for less urgent statusmessages.role="status/alert"have impliedaria-live-values