Drupal.Message should add 'Error message' prefixed to Drupal.announce error messages

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html

It would be useful to see some markup around this.

For me backend (claro) hidden markup is like so:

<div class="region region-highlighted">
    <div data-drupal-messages-fallback="" class="hidden messages-list"></div><div data-drupal-messages="" class="messages-list">
  <div class="messages-list__wrapper">
                      
      <div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
                              <div class="messages__header">
                              <h2 id="message-status-title" class="messages__title">
                  Status message
                </h2>
                          </div>
                    <div class="messages__content">
                          Antibot (system_modules): disabled
                      </div>
              </div>
                  </div>
</div>


  </div>

What's interesting in this example is that they are using role="alert" to signify an error (not role="error". This seems consistent with how css frameworks like bootstrap work.

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup').submit(function() {
		$('#errors').html('');
		if ($('#first').val() === '') {
			$('#errors').append('<p>Please enter your first name.</p>');
		}
		if ($('#last').val() === '') {
			$('#errors').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email').val() === '') {
			$('#errors').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup" method="post" action="">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19

I am not sure what the value of prepending every message with error, notice, warning, info etc is.

Markup in claro is like so:

js generated markup should be the same.

I tend to agree with comment that prepending the status of the alert to every alert seems like adding image of to every alt tag.