Make it easier to add a hint or an error message to a fieldset

[36degrees]

What

If you want to use the fieldset component to group related fields, for example asking for a street address, you need to take care of including the hint / error message components separately and do extra work to associate them with the fieldset.

We do not provide any examples or guidance on how to do this, and it would be easy to get wrong (for example, by not creating the association with the fieldset)

It therefore seems like it would be useful if the fieldset component accepted hint and errorMessage objects and took care of this association itself.

Why

This was requested by @edwardhorsford in https://github.com/alphagov/govuk-design-system/issues/778#issuecomment-459047140.

Additional information

The radios, checkbox and date input components all use hints and error messages which are then associated with the fieldset using aria-describedby. However, this logic is handled (and therefore duplicated) within the individual components.

Moving this logic to the fieldset component might allow us to simplify the repeated logic in the radios, checkboxes and date input components. However, it's not clear what should happen to the hint / error message if you do not include a fieldset.

[colinrotherham]

@36degrees After exploring the code a bit more, it might be worth creating a macro for:

{% call govukFormGroup(params) %}
{{ innerHtml | trim | safe }}
{% endcall %}

Where innerHtml is the form macro's HTML (text inputs, radios, checkboxes etc).

This way we can automatically output the mandatory <div class="govuk-form-group"> wrapper (including the error message and hint) but only optionally adding an inner <fieldset> if set in params.fieldset.

Removes a lot of duplication between all the macros.

The problem with only extending govukFieldset() is that checkboxes, radios and date inputs can all drop params.fieldset and avoid the govukFieldset() macro entirely.

[frankieroberto]

I came across this today. We are adding a line of text to a page which collects someone’s address, in order to explain what the address will be used for (in this case, to send them post). I expected the govukFieldset component to support a hint param like the Radios or Checkboxes component, and was surprised to have to do this manually.

Screenshot