templates/* add role alert to our error messages and aria-invalid and…

… aria-describedby on form error according to WCAG guidlines
liqd · Jun 16, 2022 · 30001d3 · 30001d3
1 parent 02fdeb4
commit 30001d3
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 21 deletions.
diff --git a/adhocracy-plus/templates/a4dashboard/base_form_module.html b/adhocracy-plus/templates/a4dashboard/base_form_module.html
@@ -7,7 +7,7 @@
     <h1 class="mt-0">{{ view.title }}</h1>
 
     {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% for error in form.non_field_errors %}

diff --git a/adhocracy-plus/templates/a4dashboard/base_form_project.html b/adhocracy-plus/templates/a4dashboard/base_form_project.html
@@ -7,7 +7,7 @@
     <h1 class="mt-0">{{ view.title }}</h1>
 
      {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% for error in form.non_field_errors %}

diff --git a/apps/budgeting/templates/a4_candy_budgeting/proposal_create_form.html b/apps/budgeting/templates/a4_candy_budgeting/proposal_create_form.html
@@ -24,7 +24,7 @@
 
                 <h1>{% trans 'Submit a new proposal for this project'%}</h1>
                 {% if form.errors %}
-                        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                 {% endif %}
 
                 {% include "a4_candy_budgeting/includes/proposal_form.html" with proposal=proposal cancel=module.get_detail_url %}

diff --git a/apps/budgeting/templates/a4_candy_budgeting/proposal_update_form.html b/apps/budgeting/templates/a4_candy_budgeting/proposal_update_form.html
@@ -30,7 +30,7 @@
 
                 <h1>{% trans 'Edit proposal' %}</h1>
                 {% if form.errors %}
-                        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                 {% endif %}
 
                 {% include "a4_candy_budgeting/includes/proposal_form.html" with proposal=proposal cancel=object.get_absolute_url %}

diff --git a/apps/contrib/templates/a4_candy_contrib/component_library.html b/apps/contrib/templates/a4_candy_contrib/component_library.html
@@ -249,7 +249,7 @@ <h4>Lists</h4>
                 <h2 id="cl-errorlist">Errorlist</h2>
 
                 <div class="cl-example">
-                    <ul class="errorlist">
+                    <ul class="errorlist" role="alert">
                         <li>Error Message 1</li>
                         <li>Error Message 2</li>
                     </ul>
@@ -268,7 +268,7 @@ <h2 id="cl-formgroup">Formgroup</h2>
                         <div class="widget widget--textinput">
                             <input type="text" name="name" value="" id="id_field">
                         </div>
-                        <ul class="errorlist">
+                        <ul class="errorlist" role="alert">
                             <li>Error Message</li>
                         </ul>
                     </div>
@@ -282,7 +282,7 @@ <h2 id="cl-formgroup">Formgroup</h2>
                         <div class="widget widget--textinput">
                             <input type="text" name="name" value="" id="id_narrowfield">
                         </div>
-                        <ul class="errorlist">
+                        <ul class="errorlist" role="alert">
                             <li>Error Message</li>
                         </ul>
                     </div>
@@ -299,7 +299,7 @@ <h2 id="cl-formcheck">Formcheck</h2>
                         <div class="form-hint">
                             Help text
                         </div>
-                        <ul class="errorlist">
+                        <ul class="errorlist" role="alert">
                             <li>Error Message</li>
                         </ul>
                     </div>
@@ -311,7 +311,7 @@ <h2 id="cl-formcheck">Formcheck</h2>
                         <div class="form-hint">
                             Help text
                         </div>
-                        <ul class="errorlist">
+                        <ul class="errorlist" role="alert">
                             <li>Error Message</li>
                         </ul>
                     </div>

diff --git a/apps/contrib/templates/a4_candy_contrib/includes/form_field.html b/apps/contrib/templates/a4_candy_contrib/includes/form_field.html
@@ -8,15 +8,23 @@
     </label>
     {% block help_text %}
     {% if field.help_text %}
-    <div class="form-hint">
+    <p class="form-hint" id="hint_{{ field.id_for_label }}" {% if tabindex is not None %}tabindex="{{ tabindex }}"{% endif %}>
         {{ field.help_text }}
-    </div>
+    </p>
     {% endif %}
     {% endblock %}
     {% block field %}
         <div class="widget widget--{{ field|widget_type }}">
-            {{ field }}
+          {% with describedby="hint_"|add:field.id_for_label %}
+          {% if field.errors %}
+                {% render_field field aria-invalid="true" aria-describedby=describedby %}
+          {% else %}
+            {% render_field field aria-describedby=describedby %}
+          {% endif %}
+          {% endwith %}
         </div>
     {% endblock %}
-    {{ field.errors }}
+    {% if field.errors %}
+        <div role="alert">{{ field.errors }}</div>
+    {% endif %}
 </div>
diff --git a/apps/ideas/templates/a4_candy_ideas/idea_create_form.html b/apps/ideas/templates/a4_candy_ideas/idea_create_form.html
@@ -26,7 +26,7 @@
 
                     <h1>{% trans 'Submit a new idea for this project'%}</h1>
                     {% if form.errors %}
-                        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                     {% endif %}
                     <div class="u-bottom-divider">
                         <h3>{{ module.name }}</h3>

diff --git a/apps/ideas/templates/a4_candy_ideas/idea_update_form.html b/apps/ideas/templates/a4_candy_ideas/idea_update_form.html
@@ -30,7 +30,7 @@
 
                 <h1>{% trans 'Edit idea' %}</h1>
                 {% if form.errors %}
-                        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                 {% endif %}
 
                 {% include "a4_candy_ideas/includes/idea_form.html" with idea=idea cancel=object.get_absolute_url %}

diff --git a/apps/mapideas/templates/a4_candy_mapideas/mapidea_create_form.html b/apps/mapideas/templates/a4_candy_mapideas/mapidea_create_form.html
@@ -25,7 +25,7 @@
 
                     <h1>{% trans 'Submit a new idea for this project'%}</h1>
                     {% if form.errors %}
-                        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                     {% endif %}
                     <div class="u-bottom-divider">
                         <h3>{{ module.name }}</h3>

diff --git a/apps/mapideas/templates/a4_candy_mapideas/mapidea_update_form.html b/apps/mapideas/templates/a4_candy_mapideas/mapidea_update_form.html
@@ -30,7 +30,7 @@
 
                 <h1>{% trans 'Edit idea' %}</h1>
                 {% if form.errors %}
-                    <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+                    <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
                 {% endif %}
 
                 {% include "a4_candy_mapideas/includes/mapidea_form.html" with cancel=object.get_absolute_url %}

diff --git a/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_create_form.html b/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_create_form.html
@@ -6,7 +6,7 @@
 <div class="container">
     <h1 class="mt-0">{% trans 'Add a new offline event'%}</h1>
     {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% url 'a4dashboard:offlineevent-list' organisation_slug=project.organisation.slug project_slug=project.slug as cancel %}

diff --git a/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_update_form.html b/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_update_form.html
@@ -7,7 +7,7 @@
 <div class="container">
     <h1 class="mt-0">{% trans 'Edit offline event' %}</h1>
     {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% url 'a4dashboard:offlineevent-list' organisation_slug=project.organisation.slug project_slug=project.slug as cancel %}

diff --git a/apps/topicprio/templates/a4_candy_topicprio/topic_create_form.html b/apps/topicprio/templates/a4_candy_topicprio/topic_create_form.html
@@ -7,7 +7,7 @@
 <div class="container">
     <h1 class="mt-0">{% trans 'Add a new topic'%}</h1>
     {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% url 'a4dashboard:topic-list' organisation_slug=organisation.slug module_slug=module.slug as cancel %}

diff --git a/apps/topicprio/templates/a4_candy_topicprio/topic_update_form.html b/apps/topicprio/templates/a4_candy_topicprio/topic_update_form.html
@@ -7,7 +7,7 @@
 <div class="container">
     <h1 class="mt-0">{% trans 'Edit topic' %}</h1>
     {% if form.errors %}
-        <div class="errorlist">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
+        <div class="errorlist" role="alert">{% trans 'An error occured while evaluating your data. Please check the data you entered again.' %}</div>
     {% endif %}
 
     {% url 'a4dashboard:topic-list' organisation_slug=project.organisation.slug module_slug=module.slug as cancel %}