Ability to group radio buttons / checkboxes within sub-headings

[colinrotherham]

This feature adds a new macro govukFormGroup().

This lets us put radios/checkboxes inside a <div class="govuk-form-group"> wrapper, nested to multiple levels with the describedBy variable to be persisted and appended to at each level.

It also allows the component examples to show both regular and fieldset-wrapped variations using the optional params.fieldset, useful to confirm bugs like #1264

Why else is it needed?

I've also addressed what looks like a bit of technical debt.

Duplicated inside almost all form control macros is Nunjucks code to generate a govukLabel() label, a govukHint() hint an a govukErrorMessage() error message.

This code here is pretty much copy and pasted 7 times:

  {{ govukLabel({
    html: params.label.html,
    text: params.label.text,
    classes: params.label.classes,
    isPageHeading: params.label.isPageHeading,
    attributes: params.label.attributes,
    for: params.id
  }) | indent(2) | trim }}
{% if params.hint %}
  {% set hintId = params.id + '-hint' %}
  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
  {{ govukHint({
    id: hintId,
    classes: params.hint.classes,
    attributes: params.hint.attributes,
    html: params.hint.html,
    text: params.hint.text
  }) | indent(2) | trim }}
{% endif %}
{% if params.errorMessage %}
  {% set errorId = params.id + '-error' %}
  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
  {{ govukErrorMessage({
    id: errorId,
    classes: params.errorMessage.classes,
    attributes: params.errorMessage.attributes,
    html: params.errorMessage.html,
    text: params.errorMessage.text,
    visuallyHiddenText: params.errorMessage.visuallyHiddenText
  }) | indent(2) | trim }}
{% endif %}

It's used by textarea, select, radios, checkboxes, text input, file upload and date input.

All this boilerplate code is now handled by govukFormGroup().

[colinrotherham]

Can we add a Heroku deployment please?

I've added a new radios/checkboxes with subheadings demo to the form examples page.

Thanks

[colinrotherham]

Pushing again, looks like I got auto-cancelled:

This job was cancelled because the "Auto Cancellation" feature is currently enabled, and a more recent build (#7798) for pull request #1266 came in while this job was waiting to be processed.

[colinrotherham]

Thanks for the deployment @hannalaakso.

@frankieroberto I've added the radios/checkboxes within subheadings examples here:
https://govuk-frontend-review-pr-1266.herokuapp.com/examples/form-elements

[colinrotherham]

As mentioned by @frankieroberto, I'll still need an alternative to #1163 otherwise open conditional reveals won't close when another group's radio is clicked.

I'll take a look at this today.

[colinrotherham]

I've just added an alternative fix to #1163.

This adds support for "Conditional reveal across sibling form groups"

Looks like the final piece required for #1079 (including #1166 solved via govukFormGroup())

It scopes radio events a little higher so we support:

The default (as it works now)

.govuk-fieldset input[type="radio"]

Form group

.govuk-form-group input[type="radio"]

Form group with nested form groups
E.g. The radio buttons with sub-headings pattern from this ticket

.govuk-form-group .govuk-form-group input[type="radio"]

[colinrotherham]

Initial testing in IE8–11 for the "Conditional reveal across sibling form groups" feature works great

[colinrotherham]

Just added '../../vendor/polyfills/Element/prototype/closest' to radios.js so we've covered if anyone imports the file separately.

[aliuk2012]

Hi @colinrotherham

Firstly, we would like to thank you for submitting this PR and for the tremendous amount of work that you have put into this PR.
We have discussed this change as a team and would like to take this to the next GOVUK Design System Working Group on 25 April to get assurance that the pattern works from a usability point of view.

Until a decision is made we won't be requiring anything more from you and we'll keep you updated as to the progress.

[colinrotherham]

Thanks @aliuk2012.

I appreciate there are three distinct pieces of work you might want me to separate out:

1. Removing duplication of label/hint/error with govukFormGroup() macro
2. Allowing params.fieldset.describedBy to be configured (to pass to nested fieldsets)
3. Supporting conditional reveal across sibling radio lists

We can do all or any of these in isolation.

See what you think at the working group.

[colinrotherham]

Rebased with master

[aliuk2012]

Hi @colinrotherham,

Just a quick update, we were reviewing what we were going to take to the working group this week and we have decided not to take this pattern to the working group. The reason is we do not feel like this would be a good pattern to introduce and there are a lot of usability issues with it.

Regarding the other changes you have proposed in this PR, we still think that they might still be worth merging but we need to discuss this as a team.

Until a decision is made we won't be requiring anything more from you and we'll keep you updated as to the progress.

[colinrotherham]

@aliuk2012 Ah no problem.

I appreciate this pattern confuses the One thing per page approach, and it's more applicable to our staff-facing systems so we can replicate it there instead.

The other tidy-up changes

I've removed the new pattern commits, and pushed the other changes here: #1281

[colinrotherham]

Rebased with form-group-wrapper from #1281 so these are now separate.

[aliuk2012]

We are closing this PR as it was decided that this pattern had a lot of usability issues but we are still considering the other work that @colinrotherham has done but the additional work has now been split out into two separate PR (#1281, #1297)