Issue #2047175 by mgifford, jessebeach: Make the status message field discoverable by assistive technology agents; alert AT agent users to error messages.
parent
6829a653db
commit
b6ec2ac489
|
@ -9,6 +9,9 @@
|
||||||
* Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
|
* Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
|
||||||
* for info.
|
* for info.
|
||||||
*
|
*
|
||||||
|
* Add an ARIA label to the contentinfo area so that assistive technology
|
||||||
|
* user agents will better describe this landmark.
|
||||||
|
*
|
||||||
* Available variables:
|
* Available variables:
|
||||||
* - message_list: List of messages to be displayed, grouped by type.
|
* - message_list: List of messages to be displayed, grouped by type.
|
||||||
* - status_headings: List of all status types.
|
* - status_headings: List of all status types.
|
||||||
|
@ -21,7 +24,10 @@
|
||||||
*/
|
*/
|
||||||
#}
|
#}
|
||||||
{% for type, messages in message_list %}
|
{% for type, messages in message_list %}
|
||||||
<div class="messages messages--{{ type }}">
|
<div class="messages messages--{{ type }}" role="contentinfo" aria-label="{{ status_headings[type] }}">
|
||||||
|
{% if type == 'error' %}
|
||||||
|
<div role="alert">
|
||||||
|
{% endif %}
|
||||||
{% if status_headings[type] %}
|
{% if status_headings[type] %}
|
||||||
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>
|
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -34,5 +40,8 @@
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ messages.0 }}
|
{{ messages.0 }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if type == 'error' %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
Loading…
Reference in New Issue