Suggestion: Extend heading padding-top adjustment to cover other heading like elements.

[edwardhorsford]

This bit of the govuk-frontend sass applies extra padding top where a heading follows a paragraph. It's applied to several paragraph classes, but does not apply to labels or legends. These otherwise look identical to headings, and should probably have identical spacing too.

Description of the issue

Legends and labels at a certain size like l should look the same as their equivalent heading sizes. Without this adjustment, if a set of radios followed a paragraph (such as on the question page pattern), the radio legend would be too close to the proceeding paragraph - and users would need to use a modifier.

---

Note to achieve this I think we'd want to refactor the css - there's lots of paragraph-like elements to target, and lots of heading-like elements. And then the heading elements may be direct siblings or else direct descendants of a sibling (in the case of legends and labels).

Not something to directly use, but here is a refactor that ChatGPT attempted (using nhsuk styles, but govuk would be very similar):

@mixin nhsuk-heading-padding($large-elements, $small-elements) {
  @each $element in $large-elements {
    .nhsuk-body-l + #{$element},
    .nhsuk-body-m + #{$element},
    .nhsuk-body-s + #{$element},
    .nhsuk-list + #{$element},
    .nhsuk-body-l + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-m + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-s + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-list + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-l + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-body-m + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-body-s + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-list + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element} {
      @include nhsuk-responsive-padding(4, "top");
    }
  }

  @each $element in $small-elements {
    .nhsuk-body-l + #{$element},
    .nhsuk-body-m + #{$element},
    .nhsuk-body-s + #{$element},
    .nhsuk-list + #{$element},
    .nhsuk-body-l + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-m + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-s + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-list + .nhsuk-form-group > .nhsuk-label-wrapper > #{$element},
    .nhsuk-body-l + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-body-m + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-body-s + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element},
    .nhsuk-list + .nhsuk-form-group .nhsuk-fieldset > .nhsuk-fieldset__legend#{$element} {
      padding-top: nhsuk-spacing(1);

      @include mq($from: tablet) {
        padding-top: nhsuk-spacing(2);
      }
    }

    .nhsuk-lede-text + #{$element} {
      padding-top: 0;
    }
  }
}

@include nhsuk-heading-padding(
  ('.nhsuk-heading-l', '.nhsuk-label--l', '.nhsuk-fieldset__legend--l'),
  ('.nhsuk-heading-m', '.nhsuk-heading-s', '.nhsuk-label--m', '.nhsuk-fieldset__legend--m')
);

[edwardhorsford]

Related issue on NHSUK-Frontend.