Bugfix/use id for errors

govuk_frontend_wtf/gov_form_base.py

@@ -28,7 +28,7 @@ def map_gov_params(self, field, **kwargs):
             "name": field.name,
             "label": {"text": field.label.text},
             "attributes": {},
-            "hint": {"text": field.description},
+            "hint": {"text": field.description} if field.description else None,
         }
 
         if "value" in kwargs:

govuk_frontend_wtf/main.py

@@ -20,21 +20,29 @@ def init_app(self, app):
 def wtforms_errors(form, params={}):
     wtforms_params = {"titleText": "There is a problem", "errorList": []}
 
-    wtforms_params["errorList"] = flatten_errors(form.errors)
+    id_map = {}
+    for field_name in form._fields.keys():
+        field = getattr(form, field_name, None)
+        if field and hasattr(field, 'id'):
+            id_map[field_name] = field.id
+
+    wtforms_params["errorList"] = flatten_errors(form.errors, id_map=id_map)
 
     return merger.merge(wtforms_params, params)
 
 
-def flatten_errors(errors, prefix=""):
+def flatten_errors(errors, prefix="", id_map={}):
     """Return list of errors from form errors."""
     error_list = []
     if isinstance(errors, dict):
         for key, value in errors.items():
             # Recurse to handle subforms.
-            error_list += flatten_errors(value, prefix=f"{prefix}{key}-")
+            if key in id_map:
+                key = id_map[key]
+            error_list += flatten_errors(value, prefix=f"{prefix}{key}-", id_map=id_map)
     elif isinstance(errors, list) and isinstance(errors[0], dict):
         for idx, error in enumerate(errors):
-            error_list += flatten_errors(error, prefix=f"{prefix}{idx}-")
+            error_list += flatten_errors(error, prefix=f"{prefix}{idx}-", id_map=id_map)
     elif isinstance(errors, list):
         error_list.append({"text": errors[0], "href": "#{}".format(prefix.rstrip("-"))})
     else:

tests/fixtures/wtf_widgets_data.yaml

@@ -37,6 +37,44 @@ TestStringField:
         - <div class="govuk-form-group govuk-form-group--error">
         - <div id="string_field-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
 
+TestStringFieldId:
+  template: "{{ form.string_field_id }}"
+  tests:
+    test_empty_get:
+      expected_output:
+        - <input class="govuk-input" id="custom-id" name="string_field_id" type="text" aria-describedby="custom-id-hint" required="required">
+        - <label class="govuk-label" for="custom-id">\s*StringField\s*</label>
+        - <div id="custom-id-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
+    test_output_sanitized:
+      request:
+        method: post
+        data:
+          string_field_id: <script>alert("Hello")</script>
+      expected_output:
+        - <input class="govuk-input govuk-input--error" id="custom-id" name="string_field_id" type="text" value="&lt;script&gt;alert\(&#34;Hello&#34;\)&lt;/script&gt;" aria-describedby="custom-id-hint custom-id-error" required="required">
+      not_expected_output:
+        - <script>alert("Hello")</script>
+    test_valid_post:
+      request:
+        method: post
+        data:
+          string_field_id: John Smith
+      expected_output:
+        - <input class="govuk-input" id="custom-id" name="string_field_id" type="text" value="John Smith" aria-describedby="custom-id-hint" required="required">
+        - <label class="govuk-label" for="custom-id">\s*StringField\s*</label>
+        - <div id="custom-id-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
+    test_invalid_post:
+      request:
+        method: post
+        data:
+          string_field_id: foo
+      expected_output:
+        - <input class="govuk-input govuk-input--error" id="custom-id" name="string_field_id" type="text" value="foo" aria-describedby="custom-id-hint custom-id-error" required="required">
+        - <label class="govuk-label" for="custom-id">\s*StringField\s*</label>
+        - <p id="custom-id-error" class="govuk-error-message">\s*<span class="govuk-visually-hidden">\s*Error:\s*</span>\s*Example serverside error - type &#34;John Smith&#34; into this field to suppress it\s*</p>
+        - <div class="govuk-form-group govuk-form-group--error">
+        - <div id="custom-id-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
+
 TestDateField:
   template: "{{ form.date_field }}"
   tests:
@@ -585,6 +623,23 @@ TestRadioField:
         - <input class="govuk-radios__input" id="radio_field-3" name="radio_field" type="radio" value="three">
         - <label class="govuk-label govuk-radios__label" for="radio_field-3">\s*Three\s*</label>
         - <div id="radio_field-hint" class="govuk-hint">\s*RadioFieldHint\s*</div>
+    test_empty_description:
+      request:
+        method: get
+        data:
+          radio_field_no_description: foo
+      expected_output:
+        - <div class="govuk-form-group">
+        - <div class="govuk-radios"    data-module="govuk-radios">
+        - <div class="govuk-radios__item">
+        - <input class="govuk-radios__input" id="radio_field" name="radio_field" type="radio" value="one">
+        - <label class="govuk-label govuk-radios__label" for="radio_field">\s*One\s*</label>
+        - <input class="govuk-radios__input" id="radio_field-2" name="radio_field" type="radio" value="two">
+        - label class="govuk-label govuk-radios__label" for="radio_field-2">\s*Two\s*</label>
+        - <input class="govuk-radios__input" id="radio_field-3" name="radio_field" type="radio" value="three">
+        - <label class="govuk-label govuk-radios__label" for="radio_field-3">\s*Three\s*</label>
+      not_expected_output:
+        - <div id="radio_field-hint" class="govuk-hint"></div>
 
 TestFileField:
   template: "{{ form.file_field }}"
@@ -729,6 +784,7 @@ TestErrorSummary:
         - <div role="alert">
         - <h2 class="govuk-error-summary__title">\s*There is a problem\s*</h2>
         - <a href="#string_field">StringField is required</a>
+        - <a href="#custom-id">StringField is required</a>
         - <a href="#date_field">Date is required</a>
         - <a href="#integer_field">IntegerField is required</a>
         - <a href="#select_field">Please select an option</a>
@@ -749,6 +805,7 @@ TestErrorSummary:
         method: post
         data:
           string_field: John Smith
+          string_field_id: John Smith
           nested_form-0-string_field: John Smith
           date_field:
             - 1
@@ -770,6 +827,7 @@ TestErrorSummary:
             - foo
             - bar
           radio_field: one
+          radio_field_no_description: one
           select_multiple_field: one
           textarea_field: foo
           charactercount_field: foo
@@ -782,6 +840,7 @@ TestErrorSummary:
         method: post
         data:
           string_field: Andy
+          string_field_id: Andy
           date_field:
             - 1
             - 1
@@ -798,6 +857,7 @@ TestErrorSummary:
             - foo
             - bar
           radio_field: one
+          radio_field_no_description: one
           select_multiple_field: one
           textarea_field: foo
           charactercount_field: foo

tests/fixtures/wtf_widgets_example_form.py

@@ -54,6 +54,14 @@ class ExampleForm(FlaskForm):
         description="StringFieldHint",
     )
 
+    string_field_id = StringField(
+        "StringField",
+        id="custom-id",
+        widget=GovTextInput(),
+        validators=[InputRequired(message="StringField is required")],
+        description="StringFieldHint",
+    )
+
     date_field = DateField(
         "DateField",
         format="%d %m %Y",
@@ -153,6 +161,13 @@ class ExampleForm(FlaskForm):
         description="RadioFieldHint",
     )
 
+    radio_field_no_description = RadioField(
+        "RadioField",
+        widget=GovRadioInput(),
+        validators=[InputRequired(message="Please select an option")],
+        choices=[("one", "One"), ("two", "Two"), ("three", "Three")],
+    )
+
     file_field = FileField(
         "FileField",
         widget=GovFileInput(),
@@ -197,3 +212,7 @@ class ExampleForm(FlaskForm):
     def validate_string_field(self, field):
         if field.data != "John Smith":
             raise ValidationError('Example serverside error - type "John Smith" into this field to suppress it')
+
+    def validate_string_field_id(self, field):
+        if field.data != "John Smith":
+            raise ValidationError('Example serverside error - type "John Smith" into this field to suppress it')