Fix duplicate IDs on course site page

[stevehook]

HAVE RAISED AN ALTERNATIVE PR TO FIX THIS IN THE FORM BUILDER https://github.com/DFE-Digital/govuk_design_system_formbuilder. IF THAT GETS MERGED I CAN JUST CLOSE THIS PR.

Context

The hint span element rendered on the candidate course site selection page are duplicates because they don't include anything unique to the individual radio buttons to which they relate. This was flagged as an issue in the DAC report.

Changes proposed in this pull request

• Swapped out the govuk_radio_buttons_fieldset for govuk_collection_radio_buttons which seems to handle hint ids correctly (it includes the value of the radio button in the hint id).

After a bit of debugging it seems govuk_radio_buttons_fieldset allows you to create a hint for each radio button but it doesn't give you any control over the id of the hint element. This depends only on the name of the field not the value of the individual buttons because, for some reason, FieldsetRadioButton just doesn't pass the value to the hint element. CollectionRadioButton does pass the value and it appears to do everything else that we need though the markup varies (see below).

The only visible difference (that I can see) is that the radio button labels are now bold. There is actually an option to to make them bold, they are normally not bold by default but if you include a hint_method as we must do here that option is ignored and they are always bold (to make them stand out from the hint according to the docs). I guess we would need some CSS to keep the non-bold labels if that's important.

Before:

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
      <h1 class="govuk-fieldset__heading">Which location are you applying to?</h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-!-margin-top-6">
        <div class="govuk-radios__item">
          <input id="candidate-interface-pick-site-form-course-option-id-131-field" aria-describedby="candidate-interface-pick-site-form-course-option-id-131-hint" class="govuk-radios__input" type="radio" value="131" name="candidate_interface_pick_site_form[course_option_id]">
          <label for="candidate-interface-pick-site-form-course-option-id-131-field" class="govuk-label govuk-radios__label">Boston Spa School</label>
          <span class="govuk-hint govuk-radios__hint" id="candidate-interface-pick-site-form-course-option-id-hint">Clifford Moor Road, Boston Spa, West Yorkshire, LS23 6RW</span>
        </div>
      </div>
    </div>
  </fieldset>
</div>

After:

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <h1 class="govuk-fieldset__heading">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">Which location are you applying to?</legend>
    </h1>
    <div id="candidate-interface-pick-site-form-course-option-id-supplemental">
      <div class="govuk-!-margin-top-6"></div>
      <div class="govuk-radios" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input id="candidate-interface-pick-site-form-course-option-id-131-field" aria-describedby="candidate-interface-pick-site-form-course-option-id-131-hint" class="govuk-radios__input" type="radio" value="131" name="candidate_interface_pick_site_form[course_option_id]">
          <label for="candidate-interface-pick-site-form-course-option-id-131-field" class="govuk-label govuk-label--s govuk-radios__label">Boston Spa School</label>
          <span class="govuk-hint govuk-radios__hint" id="candidate-interface-pick-site-form-course-option-id-131-hint">Clifford Moor Road, Boston Spa, West Yorkshire, LS23 6RW</span>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Guidance to review

• Are there any known downsides to swapping govuk_radio_buttons_fieldset for govuk_collection_radio_buttons?
• Are there any issues with the new markup?
• What's the best way to make the buttons non-bold?

Link to Trello card

https://trello.com/c/LqbMmzbb/692-dac-page-13-fix-duplicate-ids-on-course-site-page

Things to check

• This code doesn't rely on migrations in the same Pull Request
• API release notes have been updated if necessary
• New environment variables have been added to the Azure config

[duncanjbrown]

I think this is good. The Design System example bolds up radios with hints: https://design-system.service.gov.uk/components/radios/#radio-items-with-hints

[stevehook]

Closing this because the correct fix is a small change to govuk_design_system_formbuilder - x-govuk/govuk-form-builder#89