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

+1-1
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

+10-3
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

+1
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

+3-2
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

+3-2
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

+3-2
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

+2-1
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

+1-1
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

+1-1
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

+32
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>

‎tests/results/test_grouped_checkboxes_lt52.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 class="form-check-input" 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 class="form-check-input" 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 class="form-check-input" 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 class="form-check-input" 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 class="form-check-input" 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></div>
21+
</div>
22+
<div class="form-text">
23+
help
24+
</div>
25+
</fieldset>
26+
</div>
27+
</form>

‎tests/results/test_grouped_radios_failing.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form method="post">
22
<div class="mb-3" id="div_id_radio">
3-
<fieldset>
3+
<fieldset aria-describedby="id_radio_error">
44
<legend class="form-label requiredField">Radio<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_radio_0_0"

‎tests/results/test_grouped_radios_failing_lt52.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<form method="post">
2+
<div class="mb-3" id="div_id_radio">
3+
<fieldset>
4+
<legend class="form-label requiredField">Radio<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_radio_0_0"
7+
name="radio" required type="radio" value="vinyl"><label class="form-check-label"
8+
for="id_radio_0_0">Vinyl</label></div>
9+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_radio_0_1"
10+
name="radio" required type="radio" value="cd"><label class="form-check-label"
11+
for="id_radio_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_radio_1_0"
13+
name="radio" required type="radio" value="vhs"><label class="form-check-label"
14+
for="id_radio_1_0">VHS Tape</label></div>
15+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_radio_1_1"
16+
name="radio" required type="radio" value="dvd"><label class="form-check-label"
17+
for="id_radio_1_1">DVD</label></div>
18+
<div class="form-check"><input aria-invalid="true" class="form-check-input is-invalid" id="id_radio_2" name="radio"
19+
required type="radio" value="unknown"><label class="form-check-label"
20+
for="id_radio_2">Unknown</label>
21+
<div id="id_radio_error">
22+
<p class="invalid-feedback" id="error_1_id_radio"><strong>This field is required.</strong></p>
23+
</div>
24+
</div>
25+
</div>
26+
</fieldset>
27+
</div>
28+
</form>

‎tests/test_layout_objects.py

+9-1
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,11 @@ def test_grouped_checkboxes_radios(self):
608608
form = GroupedChoiceForm()
609609
form.helper = FormHelper()
610610
form.helper.layout = Layout("checkbox_select_multiple")
611-
assert parse_form(form) == parse_expected("test_grouped_checkboxes.html")
611+
if django.VERSION < (5, 2):
612+
expected = "test_grouped_checkboxes_lt52.html"
613+
else:
614+
expected = "test_grouped_checkboxes.html"
615+
assert parse_form(form) == parse_expected(expected)
612616
form.helper.layout = Layout("radio")
613617
assert parse_form(form) == parse_expected("test_grouped_radios.html")
614618

@@ -617,13 +621,17 @@ def test_grouped_checkboxes_radios(self):
617621
form.helper.layout = Layout("checkbox_select_multiple")
618622
if django.VERSION < (5, 0):
619623
expected = "test_grouped_checkboxes_failing_lt50.html"
624+
elif django.VERSION < (5, 2):
625+
expected = "test_grouped_checkboxes_failing_lt52.html"
620626
else:
621627
expected = "test_grouped_checkboxes_failing.html"
622628
assert parse_form(form) == parse_expected(expected)
623629

624630
form.helper.layout = Layout("radio")
625631
if django.VERSION < (5, 0):
626632
expected = "test_grouped_radios_failing_lt50.html"
633+
elif django.VERSION < (5, 2):
634+
expected = "test_grouped_radios_failing_lt52.html"
627635
else:
628636
expected = "test_grouped_radios_failing.html"
629637
assert parse_form(form) == parse_expected(expected)

0 commit comments

Comments
 (0)