Checkbox can end up with multiple aria-describedby attributes when used without a fieldset but with a hint

[36degrees]

The checkbox component has some logic to move the association with the error message (aria-describedby) to the input if there is no fieldset (e.g. for a single input).

It also has logic to associate the hint for the individual checkbox if a hint is provided.

We don't handle the (admittedly fairly unlikely) case where both of these things are true, so the checkbox will end up with two aria-describedby attributes (aria-describedby="id-of-error-message" aria-describedby="id-of-hint")

govuk-frontend/src/components/checkboxes/template.njk

Lines 63 to 65 in abb0c36

	{%- if (not hasFieldset) and ((describedBy | length) > 0) %} aria-describedby="{{ describedBy }}"{% endif -%}
	{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
	{%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}

You can reproduce this with the following macro call:

{% from "checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "t-and-c",
  "errorMessage": {
    "text": "Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions",
      "hint": {
        "text": "Go on, you know you want to!"
      }
    }
  ]
}) }}

which produces this HTML:

<div class="govuk-form-group govuk-form-group--error">
  <span id="t-and-c-error" class="govuk-error-message">
    Please accept the terms and conditions
  </span>
  <div class="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="t-and-c-1" name="t-and-c" type="checkbox" value="yes" aria-describedby="t-and-c-error" aria-describedby="t-and-c-1-item-hint">
      <label class="govuk-label govuk-checkboxes__label" for="t-and-c-1">
        I agree to the terms and conditions
      </label>      <span id="t-and-c-1-item-hint" class="govuk-hint govuk-checkboxes__hint">
        Go on, you know you want to!
      </span>    </div>
  </div>
</div>

instead of:

<div class="govuk-form-group govuk-form-group--error">
  <span id="t-and-c-error" class="govuk-error-message">
    Please accept the terms and conditions
  </span>
  <div class="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="t-and-c-1" name="t-and-c" type="checkbox" value="yes" aria-describedby="t-and-c-error t-and-c-1-item-hint">
      <label class="govuk-label govuk-checkboxes__label" for="t-and-c-1">
        I agree to the terms and conditions
      </label>      <span id="t-and-c-1-item-hint" class="govuk-hint govuk-checkboxes__hint">
        Go on, you know you want to!
      </span>    </div>
  </div>
</div>

[colinrotherham]

@36degrees I might end up looking at this as part of #1079

I need a way for nested fieldset radio buttons to be described by the hint shown on a parent fieldset.