Avoid invalid nesting of <span> within a <dd> in summary list

[36degrees]

When a summary list has actions in only some of the rows, we currently include an empty span with the govuk-summary-list__actions class in the rows that do not have actions:

dl.govuk-summary-list
  div.govuk-summary-list__row
     dt.govuk-summary-list__key
     dd.govuk-summary-list__value
     dd.govuk-summary-list__actions <-- List of actions
  div.govuk-summary-list__row
     dt.govuk-summary-list__key
     dd.govuk-summary-list__value
     span.govuk-summary-list__actions <-- Empty

This was previously required because (from the tablet breakpoint upwards) the summary list is displayed as a table, and the bottom border on each 'row' is applied to the individual 'cells' within that row (the key, value, and actions elements). Omitting the actions element from a row therefore means that that part of the row does not have a bottom border.

However, this is invalid HTML as the content model for the <dl> element only allows for 'either: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. Or: One or more div elements, optionally intermixed with script-supporting elements.'

As such, it's not valid for a <span> to be a direct child of a <dl>. This has been flagged by automated testing tools such as Axe (as seen in #1806) – although we're not aware of any issues that it would cause for users in practise.

Simplify the code by moving the bottom border to the row itself. This requires us to set border-collapse: collapse in order to use the collapsing border model 2 as in the separated borders model (the initial border model) 'rows, columns, row groups, and column groups cannot have borders'

Unfortunately some browsers, including IE11 and Safari, still omit the border where a row is missing cells – so we still need to provide an empty cell for rows without actions.

Replace the empty span.govuk-summary-list__actions with an :after pseudo-element as suggested by @adamliptrot-oc. This requires a new modifier class govuk-summary-list__row--no-actions to be applied to any rows that do not have actions (unless none of the rows in the summary list have actions)

Summary of breaking changes

Where a summary list includes a mix of rows both with and without actions, for each row without any actions:

1. Remove the empty <span class="govuk-summary-list__actions"></span>
2. Add the govuk-summary-list__row--no-actions modifier class to the row itself (the wrapping <div> that has the class govuk-summary-list__row)

If you have written a template or macro for this component, you'll need to update the template or macro so that for rows without actions it:

• no longer outputs an empty <span class="govuk-summary-list__actions"></span>
• adds the govuk-summary-list__row--no-actions modifier class to the row itself

If you are using our provided Nunjucks templates, you should not need to make any changes as this will happen automatically when you update.

Closes #1806

[36degrees]

I should have tested this more thoroughly cross-browser before raising – unfortunately IE11 and Safari (at least) still omit the border on the row when the 'cell' is missing 😩

So this might be a non-starter.

[36degrees]

Updated the PR to replace the <span> with an after pseudo element as suggested in #1806 (comment) (rather than removing it entirely which was the original plan).

It'd be great to find a way to avoid the need for the pseudo element, but I haven't been able to. I still think that moving the border to the row makes sense, even if we need to keep the empty cell.

[lfdebrux]

This looks good to me! Thank you so much for taking the time to make the commit messages so helpful 🙏

I've tested in Assistiv Labs with Windows High Contrast Mode and Edge, and NVDA and Firefox. I've also had a look at it with Safari on iOS v13.2 using BrowserStack. It looked fine everywhere. I also had a look at it in latest Chrome and Safari on macOS, with and without styles, comparing with the old version, and the design looked to be consistent there.

[36degrees]

Suggested release note entry…

Update the markup for summary lists

The HTML for the summary list has been updated to avoid nesting <span> elements within <dd> elements, which is invalid. This only affects summary lists that include a mix of rows with and without actions.

Instead of including an empty <span class="govuk-summary-list__actions"></span> within the rows that do not have any actions, add the govuk-summary-list__row--no-actions modifier class to the row.

The Design System does not currently include an example of a summary list where only some rows have actions – we might want to consider adding one? In which case we could then link to the Design System for an example.

@EoinShaughnessy thoughts?

[EoinShaughnessy]

@36degrees Release note content looks really good. Would just suggest a slight rewording:

Update the HTML for summary lists

We've updated the HTML for the summary list component to avoid nesting <span> elements within <dd> elements, which is invalid HTML. This update only affects summary lists that include a mix of rows with and without actions.

Do not include an empty <span class="govuk-summary-list__actions"></span> within the rows that do not have any actions. Instead, add the govuk-summary-list__row--no-actions modifier class to the row.

I put 'HTML' in the title instead of 'markdown' so we're not using 2 descriptors for the same thing.

[36degrees]

The Design System does not currently include an example of a summary list where only some rows have actions – we might want to consider adding one? In which case we could then link to the Design System for an example.

I've raised an issue about this here: alphagov/govuk-design-system#1948