Add a summary list example where only some rows have actions

[36degrees]

The guidance will not match the HTML in the example until updated to GOV.UK Frontend v4.0 with the changes from alphagov/govuk-frontend#2323. Do not merge until after the Design System has been updated to 4.0.

The example also takes into account changes to the other existing examples made in #1989, which has not yet been merged.

Closes #1948.

[netlify]

✔️ You can preview this change here:

🔨 Explore the source changes: a4baf9f

🔍 Inspect the deploy log: https://app.netlify.com/sites/govuk-design-system-preview/deploys/61bb0704dd89fa000884439f

😎 Browse the preview: https://deploy-preview-1990--govuk-design-system-preview.netlify.app

[calvin-lau-sig7]

Okay, guidance looks to me thanks all! This is probably ready to move to 'Blocked' pending release of 4.0.

[36degrees]

Rebased on top of the other guidance changes which I've split out into #1997 – that PR should be merged first at which point the base for this PR will update to main.

[NikhilNanjappa]

Hi @36degrees , is this not available on govuk-frontend v4.1.0 ?

Im using a "mixed actions" summary list macro and it doesnt seem to be adding the govuk-summary-list__row--no-actions class. Manually adding it using the classes also does not seem to remove the accessibility issue either.

    {{ govukSummaryList({
      classes: 'govuk-!-margin-bottom-9',
      rows: [
        {
          classes: 'my-class',
          key: { text: 'Key' },
          value: { text: 'Value' },
          actions: { ... }
        },
        {
          classes: 'my-class',
          key: { text: 'Key' },
          value: { text: 'Value' }
        }
      ]
    }) }}

[36degrees]

@NikhilNanjappa this change was made in v4.0.0, so should work just fine in v4.1.0.

Can you confirm what HTML is being outputted by the macro?

[NikhilNanjappa]

Hi @36degrees - this is the rendered HTML

<dl class="govuk-summary-list govuk-!-margin-bottom-9">
    ...
    <div class="govuk-summary-list__row my-class">
        <dt class="govuk-summary-list__key">
          Text
        </dt>
        <dd class="govuk-summary-list__value">
          Value
        </dd>
        <span class="govuk-summary-list__actions"></span>
    </div>
</dl>

PS: I can see the changes you made within the node_modules source code. Im puzzled why it doesn't show up

[36degrees]

Can I just check that you're definitely using the Nunjucks macros included in the GOV.UK Frontend package? You haven't got another version of the govukSummaryList macro in your codebase somewhere?

[NikhilNanjappa]

We are using GOV.UK CASA framework and importing summary list as so:

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

I just checked their source code and they seem to using govuk-frontend 3.13.1 :(

[36degrees]

Ahah, that would do it! 🙂 It looks like the latest version of GOV.UK CASA might support the latest version of GOV.UK Frontend, but you would need to upgrade to the latest version of GOV.UK CASA in your application.

If you're currently importing the CSS and JavaScript separately to GOV.UK CASA, make sure that you're using the same version of GOV.UK Frontend for the CSS, JavaScript and the Nunjucks macros and it should still display correctly.

Before v4.0.0 the summary list outputted an empty span (<span class="govuk-summary-list__actions"></span>) instead. Although this is technically invalid HTML, we are not aware of any real world issues that this would create.

[NikhilNanjappa]

Unfortunately, I dont think we can upgrade just the govuk-frontend version without upgrading the CASA (which is a much bigger change and probably wouldnt be doing it). So I guess we have to be ok with this a11y issue then

If you're currently importing the CSS and JavaScript separately to GOV.UK CASA

Do you know if this can be done ?