x-govuk/govuk-form-builder

Labels in radio button collections that include hint text are unexpectedly emboldened

Closed this issue · 0 comments

The form builder currently has opinionated behaviour with regards to radio button collections that include hint text:

When descriptions are enabled in a radio button collection the labels are made bold by default. This provides additional contrast and makes the labels stand out from the hint.

Issues with this behaviour

  • It’s unexpected: adding hint text shouldn’t change the appearance of a corresponding label (not least because the same behaviour isn’t exhibited in the Nunjucks components provided by GDS)
  • It’s inconsistent: this behaviour is only exhibited when using govuk_collection_radio_buttons, not govuk_radio_buttons_fieldset. The equivalent govuk_collection_check_boxes helper also doesn’t embolden label options with hint text
  • It’s not a recommendation: The GOV.UK Design System makes no such recommendation, and its examples don’t show emboldened labels.
  • It’s not documented: while the behaviour is noted, the documentation doesn’t mention how to disable this behaviour (by using bold_labels: false)
  • It requires additional code: to get the expected behaviour requires adding bold_labels: false to every radio collection
  • It cannot be disabled globally: each collection has to have this behaviour disabled individually, leading to potential inconsistencies across different forms

Resolution

  1. Document the bold_labels option on govuk_collection_radio_buttons
  2. Add a global config option for this feature. By default this option should maintain the current behaviour. Setting this option to false would disable this behaviour across all radio collections (except those which have bold_labels: true, of course)
  3. Consider including a breaking change in the 4.0.0 release. 2 possible options:
    1. Remove this behaviour entirely
    2. Keep the global option, but change its value so that this behaviour is disabled by default