Labels cannot be styled as hint text

[robertdeniszczyc2]

Hello,

Background

If a label is included on a field, you may wish for the label to be styled as hint text using the govuk-hint class name.

The class can be added onto the label element in HOF via the labelClassName field on a field definition, for example on an input field for a currency input:

  my_field: {
    validate: ['required', 'decimal', { type: 'min', arguments: 0 }],
    className: ['govuk-input', 'govuk-input--width-5'],
    attributes: {
      prefix: '£'
    },
    labelClassName: "govuk-hint"
  },

This configuration will apply the govuk-hint style onto the label generating HTML like:

<label for="my_field" class="govuk-label govuk-hint ">
    Enter the amount, for example £123 or £123.45.
</label>

The hint class is appended into the class names in the HTML via HOF template mixin logic: https://github.com/UKHomeOfficeForms/hof/blob/master/frontend/template-mixins/mixins/template-mixins.js#L214

labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',

The Problem

HOF consumes the styles for the label and hint styles from govuk-frontend. On the input component, the hint styles are consumed before the label styles, which means in the generated CSS the label styling takes precedence, meaning HOF is unable to apply the hint class names onto a label as they are overridden by the govuk-label styles.

A field requires a label to be WCAG 2.X compliant so I'm not able to use a blank label and hint text configured in HOF instead, as while visually it looks identical, semantically it doesn't generate WCAG 2.X compliant HTML.

Other information

GOVUK Design System includes examples of using input fields and labels. On the examples, what would be page headers in a HOF form are shown as form labels, so there appears to be a divergence in the Design System and HOF for how labels are used on the page: https://design-system.service.gov.uk/components/text-input/

[sulthan-ahmed]

Here is what @robertdeniszczyc2 is looking for