Skip to content

Commit d06f348

Browse files
smithdc1smithdc1
committed
Accessibility Improvements
1 parent e9a5108 commit d06f348

14 files changed

+122
-15
lines changed

‎crispy_bootstrap5/templates/bootstrap5/field.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{% endif %}
1212
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
1313
{% if field.label and not field|is_checkbox and form_show_labels %}
14-
{% if field.use_fieldset %}<fieldset{% if 'form-horizontal' in form_class %} class="row"{% endif %}>{% endif %}
14+
{% if field.use_fieldset %}<fieldset{% if 'form-horizontal' in form_class %} class="row"{% endif %}{% if field.aria_describedby %} aria-describedby="{{ field.aria_describedby }}"{% endif %}>{% endif %}
1515
<{% if field.use_fieldset %}legend{% else %}label{% endif %}
1616
{% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="{% if 'form-horizontal' in form_class %}col-form-label pt-0{% else %}form-label{% endif %}{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
1717
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}

‎crispy_bootstrap5/templates/bootstrap5/layout/field_with_buttons.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,16 @@
2424
{% endif %}
2525
{{ buttons|safe }}
2626
</div>
27-
{% for error in field.errors %}
28-
<p id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="text-danger mb-0"><small><strong>{{ error }}</strong></small></p>
29-
{% endfor %}
27+
{% if field.errors.field_id %}
28+
{# Django 5.2+ #}
29+
<div id="{{field.errors.field_id}}_error">
30+
{% else %}
31+
<div id="{{field.auto_id}}_error">
32+
{% endif %}
33+
{% for error in field.errors %}
34+
<p id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="text-danger mb-0"><small><strong>{{ error }}</strong></small></p>
35+
{% endfor %}
36+
</div>
3037
{% include 'bootstrap5/layout/help_text.html' %}
3138
</div>
3239
</div>

‎tests/results/field_with_buttons.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<input class="form-control inputtext textInput textinput" id="id_email" aria-describedby="id_email_helptext"
88
maxlength="30" name="email" required type="text">
99
<a class="btn btn-primary" role="button">click me</a></div>
10+
<div id="id_email_error"></div>
1011
<div class="form-text" id="id_email_helptext">Insert your email</div>
1112
</div>
1213
</div>

‎tests/results/field_with_buttons_failing.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div class="input-group"><input class="form-control inputtext is-invalid textInput textinput" aria-describedby="id_email_error"
77
id="id_email" maxlength="20" name="email" required type="text" aria-invalid="true"><button
88
class="btn btn-outline-secondary" type="button">Go!</button></div>
9-
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is
10-
required.</strong></small></p>
9+
<div id="id_email_error">
10+
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is required.</strong></small></p>
11+
</div>
1112
</div>
1213
</div>
1314
</div>

‎tests/results/field_with_buttons_failing_lt50.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div class="input-group"><input class="form-control inputtext is-invalid textInput textinput"
77
id="id_email" maxlength="20" name="email" required type="text"><button
88
class="btn btn-outline-secondary" type="button">Go!</button></div>
9-
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is
10-
required.</strong></small></p>
9+
<div id="id_email_error">
10+
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is required.</strong></small></p>
11+
</div>
1112
</div>
1213
</div>
1314
</div>

‎tests/results/field_with_buttons_failing_lt52.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div class="input-group"><input class="form-control inputtext is-invalid textInput textinput"
77
id="id_email" maxlength="20" name="email" required type="text" aria-invalid="true"><button
88
class="btn btn-outline-secondary" type="button">Go!</button></div>
9-
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is
10-
required.</strong></small></p>
9+
<div id="id_email_error">
10+
<p class="mb-0 text-danger" id="error_1_id_email"><small><strong>This field is required.</strong></small></p>
11+
</div>
1112
</div>
1213
</div>
1314
</div>

‎tests/results/field_with_buttons_lt50.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<input class="form-control inputtext textInput textinput" id="id_email"
88
maxlength="30" name="email" required type="text">
99
<a class="btn btn-primary" role="button">click me</a></div>
10-
<div class="form-text" id="id_email_helptext">Insert your email</div>
10+
<div id="id_email_error"></div>
11+
<div class="form-text" id="id_email_helptext">Insert your email</div>
1112
</div>
1213
</div>
1314
</div>

‎tests/results/test_grouped_checkboxes.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form method="post">
22
<div class="mb-3" id="div_id_checkbox_select_multiple">
3-
<fieldset>
3+
<fieldset aria-describedby="id_checkbox_select_multiple_helptext">
44
<legend class="form-label requiredField">Checkbox select multiple<span class="asteriskField">*</span></legend>
55
<div><strong>Audio</strong>
66
<div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_0_0"

‎tests/results/test_grouped_checkboxes_failing.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form method="post">
22
<div class="mb-3" id="div_id_checkbox_select_multiple">
3-
<fieldset>
3+
<fieldset aria-describedby="id_checkbox_select_multiple_helptext id_checkbox_select_multiple_error">
44
<legend class="form-label requiredField">Checkbox select multiple<span class="asteriskField">*</span></legend>
55
<div><strong>Audio</strong>
66
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_0_0"

‎tests/results/test_grouped_checkboxes_failing_lt52.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<form method="post">
2+
<div class="mb-3" id="div_id_checkbox_select_multiple">
3+
<fieldset>
4+
<legend class="form-label requiredField">Checkbox select multiple<span class="asteriskField">*</span></legend>
5+
<div><strong>Audio</strong>
6+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_0_0"
7+
name="checkbox_select_multiple" type="checkbox" value="vinyl"><label class="form-check-label"
8+
for="id_checkbox_select_multiple_0_0">Vinyl</label></div>
9+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_0_1"
10+
name="checkbox_select_multiple" type="checkbox" value="cd"><label class="form-check-label"
11+
for="id_checkbox_select_multiple_0_1">CD</label></div><strong>Video</strong>
12+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_1_0"
13+
name="checkbox_select_multiple" type="checkbox" value="vhs"><label class="form-check-label"
14+
for="id_checkbox_select_multiple_1_0">VHS Tape</label></div>
15+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_1_1"
16+
name="checkbox_select_multiple" type="checkbox" value="dvd"><label class="form-check-label"
17+
for="id_checkbox_select_multiple_1_1">DVD</label></div>
18+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_checkbox_select_multiple_2"
19+
name="checkbox_select_multiple" type="checkbox" value="unknown"><label class="form-check-label"
20+
for="id_checkbox_select_multiple_2">Unknown</label>
21+
<div id="id_checkbox_select_multiple_error">
22+
<p class="invalid-feedback" id="error_1_id_checkbox_select_multiple"><strong>This field is
23+
required.</strong></p>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="form-text">
28+
help
29+
</div>
30+
</fieldset>
31+
</div>
32+
</form>

0 commit comments

Comments
 (0)