Summary list

[amyhupe]

Use this issue to discuss the summary list component.

[Fenwick17]

@dashouse If there is only one action it appears to still use

<ul>
  <li>Change</li>
</ul>

Did you consider the option of using a singular <a> if there is only one action for that item?

[NickColley]

@Fenwick17 we did have a little think about this.

Since some rows may have multiple actions, we thought that having them consistently as lists would allow a user to have a consistent way of interacting with the actions between rows.

We could definitely only have an anchor though, what do you think?

[stevenaproctor]

@nickcolley For something like a check answers page, there will typically only be one action. If there are a lot of questions on the page, that is a lot of 'list with one item'.

What about putting a list inside of a list? I know it is technically possible, but does it make the screen harder to understand? Do people know what list they are in?

[stevenaproctor]

@nickcolley @dashouse @amyhupe We are going to use this code for our add to list pattern but in our pattern there is no key-value pair. There is just a value used for the <dt> and then the actions. Adding a key like 'Name' would be quite repetitive. Here's a screenshot.

We thought about using a <ul> but that meant nesting lists in lists. What do you all think about using the same summary list for a list without a key-value pair but associated actions?

[stevenaproctor]

Or is there a way of grouping all the <dd>s under a single <dt>?

<dl>
  <dt>Directors</dt>
  <dd>Sydney Russell
    <ul>
      <li>Change</li>
      <li>Remove</li>
    </ul>
  </dd>
</dl>

[stevenaproctor]

@timpaul @dashouse Thanks for talking through the add to list pattern and possible code today. I will take a look at the <ul> solution. Expect a contribution soon 😸

[joelanman]

@stevenaproctor opened an issue on your point about lists with one action:

https://github.com/alphagov/govuk-frontend/issues/1128

[dwybourn]

We think we've found a bug where having a value with a very long value, e.g. the town 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch' causes the key field to be squashed.

We'd expect the key field to be fixed and wrap on the values instead.

We're using the summary-list nunjucks macro here https://github.com/DepartmentOfHealth-htbhf/htbhf-applicant-web-ui/blob/master/src/web/views/check.njk

[NickColley]

We've updated the summary list component recently:

1. to fix issues with long words not wrapping (thanks @dwybourn for also raising)
2. to ensure that if there's only one 'action item' that it's not put into a list. (thanks @Fenwick17 for raising)

Make sure you're on version 2.7.0 of GOV.UK Frontend to get these improvements.

Update: v2.8.0 has even better support for word wrapping so please upgrade to 2.8.0 :)

[dwybourn]

We're using 2.6.0 but I've just tried 2.7.0 which has fixed the issue.

Many thanks

[bill-richards]

The nunjucks template is passed the correct json for example { practiceName: "Bob's Practice" } however, the following template does not insert the value Bob's Practice but rather {{ practiceName }}

                        {
                           key: { text: "Practice Name" },
                           value: { text:  "{{ practiceName }}" },
                           actions: {
                              items: [
                                 {
                                    href: #",
                                    text: "Change",
                                    visuallyHiddenText: "change-practice-name"
                                 }
                              ]
                           }
                        },

[NickColley]

Hey @bill-richards!

You're close, instead of using a string with the curly brackets, you can use practiceName directly.

Could you try doing the following:

{
    key: { text: "Practice Name" },
    value: { text:  practiceName },
    actions: {
        items: [
            {
                href: "#",
                text: "Change",
                visuallyHiddenText: "practice name"
            }
        ]
    }
}

[bill-richards]

Thanks for that @nickcolley, as you can tell from the time the issue was raised, I was up all night trying to get this working.

[NickColley]

@bill-richards glad that helped, look after yourself Bill hope you're not up late at night next time!

[bill-richards]

This approach does not work however when we specify HTML

key: { text: "Practice Address" },
  value: {
    html: '<p class="govuk-body">address.address1</p><p class="govuk-body">address.address2</p><p class="govuk-body">address.address3</p><p class="govuk-body">address.address4</p><p class="govuk-body">address.address5</p>'
                           }, 

[bill-richards]

@nickcolley We have however discovered that if we use string concatenation then we do get the desired result. Many thanks for your clarification

[NickColley]

Yeah you can do that or you can take advantage of the Nunjucks set capturing

{% set practiceNameHTML %}
  <p class="govuk-body">{{ address.address1 }}</p>
  <p class="govuk-body">{{ address.address2 }}</p>
  <p class="govuk-body">{{ address.address3 }}</p>
  <p class="govuk-body">{{ address.address4 }}</p>
  <p class="govuk-body">{{ address.address5 }}</p>
{% endset %}
  
{{ govukSummaryList({
  rows: [
    {
      key: { text: "Practice Name" },
      value: {
        html:  practiceNameHTML
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "practice name"
          }
        ]
      }
    }
  ]
}) }}

I have created an example application for you to see this in action:

• https://govuk-design-system-backlog-issue-182.glitch.me/
• https://glitch.com/edit/#!/govuk-design-system-backlog-issue-182?path=src/views/index.html:25:6

[NickColley]

We've had a contribution so that people can remove the visited state from the action (Change) links.

We've decided to merge this so service teams can add classes manually but are interested if we could improve any guidance based around this.

You can read how they got on here: https://github.com/alphagov/govuk-frontend/pull/1233#issuecomment-469690714

[tmakin]

The intermediate div between the dl and dt raises WCAG validation warnings on the Deque validator https://dequeuniversity.com/rules/axe/3.0/dlitem https://www.w3.org/TR/WCAG20-TECHS/H40.html

I'm curious to know whether this intermediate element is considered a spec violation. If not I will report issue to Deque and suggest they relax their validation rules to check for a dl which is not a direct parent for the dt.

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row"> <!-- Deque doesn't like this line -->
    <dt class="govuk-summary-list__key">
      Name
    </dt>
    <dd class="govuk-summary-list__value">
      Sarah Philips
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change
        <span class="govuk-visually-hidden"> name</span>
      </a>
    </dd>
  </div>
</dl>

[dashouse]

@tmakin Thanks for the comment. The issue is being flagged on an old version of the spec, a <div> inside a <dl> is considered a valid way of grouping a <dd> and <dt> - see https://www.w3.org/TR/html52/grouping-content.html#the-dl-element

You'll find a few of issues raised about this on aXe and other validatiors. We suggest omitting from your tests or making a note to ignore it.

[tmakin]

@dashouse Many thanks, that reference clears things up.

Looks like axe are on the case already: https://github.com/dequelabs/axe-core/issues/262

[edwardhorsford]

Is it possible to have some items with an action menu and some not? If I don't provide on one, but I do on others, the border doesn't extend fully across.

[edwardhorsford]

I can possibly provide an empty array to actions.items, but this then results in an empty ul, which isn't ideal. Possibly a check for count of items in actions.items could solve this?

[edwardhorsford]

I added a pr to fix the empty ul - #1259

[edwardhorsford]

I wonder if we could have a new component (or alt version of this one) for simplified key-value pair display.

Right now I think many services / teams will be using separate paragraphs for each item - I suspect key-value pair with description lists would be more appropriate.

Some examples:

Service manual

GOV.UK

This sort of display is often used for 'metadata' type information about a page / service / piece of content.

[edwardhorsford]

Another example of dd from govuk search:

[edwardhorsford]

I'd like to be able to have a single change link that spans several items - has anyone done this?

A possible visual treatment:

The component has govuk-summary-list--no-border - but you can't apply this to a row as there's no classes option in the row. Even if you could - I think you might want something to indicate the change link applies to the section.

[edwardhorsford]

A better example of my use case:

The reporter type and reference number can only be edited as one. The reference number is also only relevant if trading standards is the report source.

I could do this:

Here we lose the semantics of the dt/dd by including a label in the dd.

---

My other option with the current design would be to use summary list for the two fields without any change links - and manually add my own change link outside of the summary field.

[andymantell]

Would be nice to be able to print this component and retain the layout. At the moment the media queries are set up such that it is linearised for print.

Whether that's appropriate by default, or whether it should be a variant of the component I am not sure. Our use of the summary list doesn't include the "Change" links, so naturally it is a bit narrower than the full thing. On a printed A4 page there's plenty of room for it.

[terrysimpson99]

Is there a particular reason for the term 'Change'? We currently use the term 'Edit' but we could adopt the term 'Change' if that's the right thing to do.