Labels in radio button collections that include hint text are unexpectedly emboldened
Closed this issue · 0 comments
paulrobertlloyd commented
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
, notgovuk_radio_buttons_fieldset
. The equivalentgovuk_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
- Document the
bold_labels
option ongovuk_collection_radio_buttons
- 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 havebold_labels: true
, of course) - Consider including a breaking change in the 4.0.0 release. 2 possible options:
- Remove this behaviour entirely
- Keep the global option, but change its value so that this behaviour is disabled by default