Updated id for help text to align with aria-describedby attributed added by Django in 5.0+

smithdc1 · smithdc1 · commit c71e08a67d20 · 2025-05-21T07:30:37.000+01:00
Django 5.0 added `aria-describedby` to link form inputs to its help text. Align the `id` used for help text so screen readers can make use of the attribute. https://docs.djangoproject.com/en/5.2/releases/5.0/#forms
diff --git a/crispy_bootstrap4/templates/bootstrap4/layout/help_text.html b/crispy_bootstrap4/templates/bootstrap4/layout/help_text.html
@@ -1,7 +1,7 @@
 {% if field.help_text %}
     {% if help_text_inline %}
-        <span id="hint_{{ field.auto_id }}" class="text-muted">{{ field.help_text|safe }}</span>
+        <span id="{{ field.auto_id }}_helptext" class="text-muted">{{ field.help_text|safe }}</span>
     {% else %}
-        <small id="hint_{{ field.auto_id }}" class="form-text text-muted">{{ field.help_text|safe }}</small>
+        <small id="{{ field.auto_id }}_helptext" class="form-text text-muted">{{ field.help_text|safe }}</small>
     {% endif %}
 {% endif %}
diff --git a/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_false.html b/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_false.html
@@ -7,7 +7,7 @@
                        class="textinput textInput inputtext form-control is-invalid" required id="id_email" />
                 <div class="input-group-append"><span class="input-group-text">whatever</span></div>
             </div>
-            <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_first_name" class="form-group">
diff --git a/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_false_lt50.html b/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_false_lt50.html
@@ -6,7 +6,7 @@
                 <input type="text" name="email" value="invalidemail" maxlength="30" class="textinput textInput inputtext form-control is-invalid" required id="id_email" />
                 <div class="input-group-append"><span class="input-group-text">whatever</span></div>
             </div>
-            <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_first_name" class="form-group">
diff --git a/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_true.html b/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_true.html
@@ -8,7 +8,7 @@
                 <div class="input-group-append"><span class="input-group-text">whatever</span></div>
                 <span id="error_1_id_email" class="invalid-feedback"><strong>Enter a valid email address.</strong></span>
             </div>
-            <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_first_name" class="form-group">
diff --git a/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_true_lt50.html b/tests/results/bootstrap4/test_form_helper/bootstrap_form_show_errors_bs4_true_lt50.html
@@ -7,7 +7,7 @@
                 <div class="input-group-append"><span class="input-group-text">whatever</span></div>
                 <span id="error_1_id_email" class="invalid-feedback"><strong>Enter a valid email address.</strong></span>
             </div>
-            <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_first_name" class="form-group">
diff --git a/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_false.html b/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_false.html
@@ -8,7 +8,7 @@
                 class="asteriskField">*</span> </label>
         <div> <input type="text" name="email" maxlength="30" aria-describedby="id_email_helptext" aria-invalid="true"
                 class="textinput textInput inputtext form-control is-invalid" required id="id_email"> <small
-                id="hint_id_email" class="form-text text-muted">Insert your email</small> </div>
+                id="id_email_helptext" class="form-text text-muted">Insert your email</small> </div>
     </div>
     <div id="div_id_password1" class="form-group"> <label for="id_password1" class=" requiredField"> password<span
                 class="asteriskField">*</span> </label>
diff --git a/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_false_lt50.html b/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_false_lt50.html
@@ -8,7 +8,7 @@
                 class="asteriskField">*</span> </label>
         <div> <input type="text" name="email" maxlength="30"
                 class="textinput textInput inputtext form-control is-invalid" required id="id_email"> <small
-                id="hint_id_email" class="form-text text-muted">Insert your email</small> </div>
+                id="id_email_helptext" class="form-text text-muted">Insert your email</small> </div>
     </div>
     <div id="div_id_password1" class="form-group"> <label for="id_password1" class=" requiredField"> password<span
                 class="asteriskField">*</span> </label>
diff --git a/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_true.html b/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_true.html
@@ -14,7 +14,7 @@
         <div> <input type="text" name="email" maxlength="30" aria-describedby="id_email_helptext" aria-invalid="true"
                 class="textinput textInput inputtext form-control is-invalid" required id="id_email"> <span
                 id="error_1_id_email" class="invalid-feedback"><strong>This field is required.</strong></span> <small
-                id="hint_id_email" class="form-text text-muted">Insert your email</small> </div>
+                id="id_email_helptext" class="form-text text-muted">Insert your email</small> </div>
     </div>
     <div id="div_id_password1" class="form-group"> <label for="id_password1" class=" requiredField"> password<span
                 class="asteriskField">*</span> </label>
diff --git a/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_true_lt50.html b/tests/results/bootstrap4/test_form_helper/test_form_show_errors_non_field_errors_true_lt50.html
@@ -14,7 +14,7 @@
         <div> <input type="text" name="email" maxlength="30"
                 class="textinput textInput inputtext form-control is-invalid" required id="id_email"> <span
                 id="error_1_id_email" class="invalid-feedback"><strong>This field is required.</strong></span> <small
-                id="hint_id_email" class="form-text text-muted">Insert your email</small> </div>
+                id="id_email_helptext" class="form-text text-muted">Insert your email</small> </div>
     </div>
     <div id="div_id_password1" class="form-group"> <label for="id_password1" class=" requiredField"> password<span
                 class="asteriskField">*</span> </label>
diff --git a/tests/results/bootstrap4/test_layout_objects/test_prepended_appended_text.html b/tests/results/bootstrap4/test_layout_objects/test_prepended_appended_text.html
@@ -9,7 +9,7 @@
                 <div class="input-group-append active">
                     <span class="input-group-text">gmail.com</span>
                 </div>
-            </div> <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            </div> <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_password1" class="form-group">
diff --git a/tests/results/bootstrap4/test_layout_objects/test_prepended_appended_text_lt50.html b/tests/results/bootstrap4/test_layout_objects/test_prepended_appended_text_lt50.html
@@ -8,7 +8,7 @@
                 <div class="input-group-append active">
                     <span class="input-group-text">gmail.com</span>
                 </div>
-            </div> <small id="hint_id_email" class="form-text text-muted">Insert your email</small>
+            </div> <small id="id_email_helptext" class="form-text text-muted">Insert your email</small>
         </div>
     </div>
     <div id="div_id_password1" class="form-group">
diff --git a/tests/test_form_helper.py b/tests/test_form_helper.py
@@ -556,7 +556,9 @@ def test_error_and_help_inline():
 
     # Check that error goes before help, otherwise CSS won't work
     error_position = html.find('<span id="error_1_id_email" class="help-inline">')
-    help_position = html.find('<small id="hint_id_email" class="form-text text-muted">')
+    help_position = html.find(
+        '<small id="id_email_helptext" class="form-text text-muted">'
+    )
     assert error_position < help_position
 
 
diff --git a/tests/test_layout_objects.py b/tests/test_layout_objects.py
@@ -236,7 +236,7 @@ def test_accordion_and_accordiongroup(self):
 
         accordion_id = match.group(1)
 
-        assert html.count('<div class="card mb-2"') == 2
+        assert html.count('<div class="card mb-2') == 2
         assert html.count('<div class="card-header"') == 2
 
         assert html.count('data-parent="#{}"'.format(accordion_id)) == 2
