From f75e8db48359d434db57a2b1a25ca1d9168ef814 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Wed, 21 May 2025 07:24:07 +0100
Subject: [PATCH] Updated id for help text to align with aria-describedby
 attributed added by Django in 5.0+

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
---
 CHANGELOG.md                                                  | 1 +
 crispy_bootstrap4/templates/bootstrap4/layout/help_text.html  | 4 ++--
 .../bootstrap_form_show_errors_bs4_false.html                 | 2 +-
 .../bootstrap_form_show_errors_bs4_false_lt50.html            | 2 +-
 .../test_form_helper/bootstrap_form_show_errors_bs4_true.html | 2 +-
 .../bootstrap_form_show_errors_bs4_true_lt50.html             | 2 +-
 .../test_form_show_errors_non_field_errors_false.html         | 2 +-
 .../test_form_show_errors_non_field_errors_false_lt50.html    | 2 +-
 .../test_form_show_errors_non_field_errors_true.html          | 2 +-
 .../test_form_show_errors_non_field_errors_true_lt50.html     | 2 +-
 .../test_layout_objects/test_prepended_appended_text.html     | 2 +-
 .../test_prepended_appended_text_lt50.html                    | 2 +-
 tests/test_form_helper.py                                     | 4 +++-
 tests/test_layout_objects.py                                  | 2 +-
 14 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f69276..e024986 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Next Release
 
 * Added support for Python 3.13.
+* Changed `id` for help text to align with aria-describedby attribute added by Django 5.0+.
 
 ## 2024.10 (2024-10-05)
 
diff --git a/crispy_bootstrap4/templates/bootstrap4/layout/help_text.html b/crispy_bootstrap4/templates/bootstrap4/layout/help_text.html
index 3b5695c..fdea718 100644
--- 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
index 64982b3..9bd16d5 100644
--- 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
index 6ed055e..c01b99c 100644
--- 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
index de7039c..f976d4a 100644
--- 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
index 56dcaa5..95da460 100644
--- 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
index 070ed63..ea6d23c 100644
--- 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
index 4dac28d..bbc43a2 100644
--- 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
index 5f71148..0556212 100644
--- 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
index 27e32c0..8063549 100644
--- 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
index 50194fd..f77c8af 100644
--- 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
index 19b2933..d5be9da 100644
--- 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
index b2524d5..d73a0c4 100644
--- 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
index 37fcbd0..5adea3b 100644
--- 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