Summary list (with a mix of rows with and without actions) raises HTML validation error

[dalepotter]

The rendered output of a Summary list component (containing rows with and without 'actions') includes a span element in order to extend the border for rows without actions - example output below:

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Fee (£)
    </dt>
    <dd class="govuk-summary-list__value">
      20
    </dd>
    <span class="govuk-summary-list__actions"></span>
  </div>

  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Reference
    </dt>
    <dd class="govuk-summary-list__value">
      AB123
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="/enter-reference">Change</a>
    </dd>
  </div>
</dl>

However, this output generates an error when testing against the HTML validator.

Element span not allowed as child of element div in this context.

[36degrees]

Hi @dalepotter,

Thanks for raising. I think this might be a duplicate of #1806 – would you mind taking a look and checking if you think it's the same problem?

[dalepotter]

@36degrees This is indeed a duplicate of #1806 - apologies the original issue was not found in my searches for a report. Closing this issue...