Fix help text and error IDs for aria-describedby (#746)

* Fix help text and error IDs for aria-describedby

Django recently started using `aria-describedby` to associate form
fields first with their help texts, and later also with error messages.

In #716, django-bootstrap5 was adapted to also include those the
necessary IDs in templates.

`aria-describedby` for fields can have different values:

-   `"{field.auto_id}_helptext"`
-   `"{field.auto_id}_error"`
-   both of them
-   a user defined value that is left unchanged

The approach in #716 was to use the value from `aria-describedby` for
the ID of the help text. Unfortunately, this only works in the first
case.

So I propose to solve this the same way the django templates solve this
and just hardcode the IDs.

* fix tests for django 5.2

* fix tests

---------

Co-authored-by: Dylan Verheul <[email protected]>

Author: xi

src/django_bootstrap5/renderers.py

@@ -394,14 +394,12 @@ def get_help_html(self):
         """Return HTML for help text."""
         help_text = self.help_text or ""
         if help_text:
-            widget_attrs = self.field.build_widget_attrs(self.widget.attrs)
-            aria_describedby = widget_attrs.get("aria-describedby")
             return render_template_file(
                 self.field_help_text_template,
                 context={
                     "field": self.field,
                     "help_text": help_text,
-                    "id_help_text": aria_describedby,
+                    "id_help_text": f"{self.field.auto_id}_helptext",
                     "layout": self.layout,
                     "show_help": self.show_help,
                 },

src/django_bootstrap5/templates/django_bootstrap5/field_errors.html

@@ -1,3 +1,7 @@
-{% for text in field_errors %}
-    <div class="invalid-feedback">{{ text }}</div>
-{% endfor %}
+{% if field_errors %}
+    <div id="{{ field.auto_id }}_error">
+        {% for text in field_errors %}
+            <div class="invalid-feedback">{{ text }}</div>
+        {% endfor %}
+    </div>
+{% endif %}

tests/test_bootstrap_field.py

@@ -37,7 +37,7 @@ def test_help_text_overridden_aria_describedby(self):
             form = SubjectTestForm()
             form.fields["subject"].widget.attrs["aria-describedby"] = "my_id"
             html = self.render("{% bootstrap_field form.subject %}", {"form": form})
-            self.assertIn('<div id="my_id" class="form-text">my_help_text</div>', html)
+            self.assertIn('<div id="id_subject_helptext" class="form-text">my_help_text</div>', html)
 
     def test_placeholder(self):
         html = self.render("{% bootstrap_field form.subject %}", {"form": SubjectTestForm()})

tests/test_bootstrap_field_input_checkbox.py

@@ -30,16 +30,20 @@ def test_input_type_checkbox_is_invalid(self):
         )
         if DJANGO_VERSION >= "5":
             html = html.replace(' aria-invalid="true"', "")
+        if DJANGO_VERSION >= "5.2":
+            html = html.replace(' aria-describedby="id_test_error"', "")
         self.assertHTMLEqual(
             html,
             (
                 '<div class="django_bootstrap5-err django_bootstrap5-req mb-3">'
                 '<div class="form-check">'
                 '<input class="form-check-input is-invalid" id="id_test" name="test" required type="checkbox">'
                 '<label class="form-check-label" for="id_test">Test</label>'
+                '<div id="id_test_error">'
                 '<div class="invalid-feedback">This field is required.</div>'
                 "</div>"
                 "</div>"
+                "</div>"
             ),
         )
 

tests/test_bootstrap_field_input_text.py

@@ -33,6 +33,8 @@ def test_input_type_text(self):
         html = self.render("{% bootstrap_field form.test %}", context={"form": form})
         if DJANGO_VERSION >= "5":
             html = html.replace(' aria-invalid="true"', "")
+        if DJANGO_VERSION >= "5.2":
+            html = html.replace(' aria-describedby="id_test_error"', "")
 
         self.assertHTMLEqual(
             html,
@@ -41,8 +43,10 @@ def test_input_type_text(self):
                 '<label class="form-label" for="id_test">Test</label>'
                 '<input type="text" name="test"'
                 ' class="form-control is-invalid" placeholder="Test" required id="id_test">'
+                '<div id="id_test_error">'
                 '<div class="invalid-feedback">This field is required.</div>'
                 "</div>"
+                "</div>"
             ),
         )
 
@@ -185,6 +189,8 @@ def test_input_validation_failure(self):
         html = self.render('{% bootstrap_field form.test addon_before="foo" %}', context={"form": form})
         if DJANGO_VERSION >= "5":
             html = html.replace(' aria-invalid="true"', "")
+        if DJANGO_VERSION >= "5.2":
+            html = html.replace(' aria-describedby="id_test_error"', "")
 
         self.assertHTMLEqual(
             html,
@@ -195,9 +201,11 @@ def test_input_validation_failure(self):
                 '<span class="input-group-text">foo</span>'
                 '<input type="text" name="test" minlength="1" class="form-control'
                 ' is-invalid" placeholder="Test" required id="id_test">'
+                '<div id="id_test_error">'
                 '<div class="invalid-feedback">This field is required.</div>'
                 "</div>"
                 "</div>"
+                "</div>"
             ),
         )
 

tests/test_bootstrap_form.py

@@ -38,17 +38,14 @@ def test_exclude(self):
         )
         if DJANGO_VERSION >= "5":
             html = html.replace(' aria-describedby="id_required_text_helptext"', "")
-            help_text = '<div id="id_required_text_helptext" class="form-text"><i>required_text_help</i>'
-        else:
-            help_text = '<div class="form-text"><i>required_text_help</i>'
         self.assertHTMLEqual(
             html,
             (
                 '<div class="mb-3 django_bootstrap5-req">'
                 '<label class="form-label" for="id_required_text">Required text</label>'
                 '<input type="text" name="required_text" class="form-control"'
                 ' placeholder="Required text" required id="id_required_text">'
-                f"{help_text}"
+                '<div id="id_required_text_helptext" class="form-text"><i>required_text_help</i>'
                 "</div>"
             ),
         )