From b6ec2ac4897165e6666b00ed8abf1700f963f95b Mon Sep 17 00:00:00 2001
From: webchick <webchick@24967.no-reply.drupal.org>
Date: Tue, 5 Nov 2013 08:43:38 -0800
Subject: [PATCH] Issue #2047175 by mgifford, jessebeach: Make the status
 message field discoverable by assistive technology agents; alert AT agent
 users to error messages.

---
 .../templates/status-messages.html.twig       | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/core/modules/system/templates/status-messages.html.twig b/core/modules/system/templates/status-messages.html.twig
index aa17bf5af8e6..505eb2098602 100644
--- a/core/modules/system/templates/status-messages.html.twig
+++ b/core/modules/system/templates/status-messages.html.twig
@@ -9,6 +9,9 @@
  * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
  * for info.
  *
+ * Add an ARIA label to the contentinfo area so that assistive technology
+ * user agents will better describe this landmark.
+ *
  * Available variables:
  * - message_list: List of messages to be displayed, grouped by type.
  * - status_headings: List of all status types.
@@ -21,18 +24,24 @@
  */
 #}
 {% for type, messages in message_list %}
-  <div class="messages messages--{{ type }}">
-    {% if status_headings[type] %}
-      <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
+  <div class="messages messages--{{ type }}" role="contentinfo" aria-label="{{ status_headings[type] }}">
+    {% if type == 'error' %}
+      <div role="alert">
     {% endif %}
-    {% if messages|length > 1 %}
-      <ul class="messages__list">
-        {% for message in messages %}
-          <li class="messages__item">{{ message }}</li>
-        {% endfor %}
-      </ul>
-    {% else %}
-      {{ messages.0 }}
+      {% if status_headings[type] %}
+        <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
+      {% endif %}
+      {% if messages|length > 1 %}
+        <ul class="messages__list">
+          {% for message in messages %}
+            <li class="messages__item">{{ message }}</li>
+          {% endfor %}
+        </ul>
+      {% else %}
+        {{ messages.0 }}
+      {% endif %}
+    {% if type == 'error' %}
+      </div>
     {% endif %}
   </div>
 {% endfor %}