Summary list

[amyhupe]

Use this issue to discuss the summary list component.

[ghost]

@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?

[ghost]

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>

[ghost]

@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 😸

[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 :)

[barry-moj]

Cheers Joe!

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Summary list (card) component. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

Two accessibility issues raised

Issue 1: WCAG A

Delete work history' isn't specifying for which card it applies

The ‘Delete work history’ links for each section, rely on surrounding content to understand their context and which work they will be deleting. As the link is not marked up in the same list item, table cell, or using different methods of aria, the link requires a user to move their focus to understand which work history they will be deleting.

More detail in this issue:

• #3673

Issue 2: WCAG A

'Change [row heading]' link doesn't give full context for the summary card it applies to

The ‘change’ links have been provided with additional link text to inform users of screen reading assistive technologies that they relate to the different questions i.e., ‘job title’. However, additional context is required to understand their whole purpose as to which section and work they relate to. For example, a user would need to navigate backwards to locate the heading to which they are sectioned under, and as there are multiple ‘change job title’ links, this can be confusing for users.

More detail in this issue:

• #3674

[jrbarnes9]

Hi. As I understand it, this new statement on WCAG 2.2 guidelines should be an 'OR' statement, rather than 'AND'. For example: "...are at least 24px by 24px in size, or have adequate spacing"

Because in this case, the action links in the component examples have a height of 23px so they are not "at least 24px by 24px in size".

...but they do meet the WCAG 'spacing' exception:

if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

[shabana-ali]

Hello,

With the addition of multiple action links, I have noticed that on a two-thirds column layout, the links stack when the viewport width is 1280 CSS pixels wide and the page is zoomed to 150%. The WCAG 2.2 success criterion 2.5.8 Target Size (minimum) is met.

Would you consider revising the 20% width set for govuk-summary-list__actions:

.govuk-summary-list__actions {
    width: 20%;
    text-align: right;
}

Obviously this is dependant on the text length of the links. The HMRC Add to a list pattern handles this although they only have 2 description values.

[JeennJeenn]

Hi all.
I had an interesting design dilemma that I would like to share along with a request to add in a customisation to the summary card component as a standard design example.

I was designing a "review and submit" page to have at the end of a application review journey. The user would go through and review several different pieces of information and select to confirm or query the information.
The 'yes/no' answer is the only value that the user can change throughout the journey. They cannot change the information they are reviewing.
On the review page, I needed a way to display the 'yes/no' answer from the user along with the option to change their answer as well as the information they were reviewing.

We had a few iterations on this before we got it right.
Our first iteration made the user believe that they could update the information itself through clicking the change action.

We needed a way of detaching the change action from the information and attaching it to the confirmation value.
We explored summary list, summary card components as well as tables and they almost worked, but not quite fitting all criteria.

In the end we made two tweak to the standard summary card component.
We used the summary card component as the grey header colour was important to group the information correctly.
We added the 'yes/no' value by the user in the heading of the summary card next to the main header question.
We removed the separation line in between the information values to bundle them up together and making them show as one piece of information.

When retesting this, we could confirm that our users no longer believed they could update the information, but instead expected to be able to change the 'yes/no' value that they selected throughout the journey.

We had managed to attach the change action to the value and detach it from the information.

So we would like for this customisation to be added into the component as a valid option as these two small changes completely changed how our users viewed the component and their expectation to the change action.
We have tested this on both big and small screen size. We have it rendering the same as the values within a summary list, so the question, value and change link sit from top to bottom within the header row.

It would be interesting if anyone has had a similar requirement and how you solved it.

[murrlipp]

Hi all,

I'm interested in any rationale around the positioning of action links to the far right of the component, and how this affects users of screen magnifiers? I understand where possible it's best to have content aligned to the left so that it is not missed by these users, but in several examples the action content is pinned to the right.

If anyone is able to comment it would be appreciated.

[joelanman]

@jeremygillies something to look at here for sure, but with white-space: nowrap what happens at small screen sizes with long actions or a lot of actions? I'm wondering if a simpler fix is to remove the divider lines

[Marat-Faizov]

Hello lovely DS team.
Sharing my query around adding copy in brackets to action links on summary card. I posted that initially on the GitHub task that made that change.
Could you please have a look at it, as it adds additional noise for screen reader users we notice quiet few implementations that causing repetition of the content in action link accessible name. Thank you
Here is link to query
alphagov/govuk-frontend#3673 (comment)

[colinbruce]

We (Legal Aid Agency) are seeing some strangeness when using voiceover on OSX to test the accessibility of summary cards.
When reading out the definition lists, it adds an empty term tag after the name of the term in each row and then repeats the term, the definition and the change link (if present)
Like this:

We tried adding aria-labels to the definition, but it still reads out the text, without affixing the empty term phrase. This means that there is a lot of repetition.

I recorded this video
https://github.com/user-attachments/assets/88cb0167-a9b3-49b9-85de-06dacdb74f60
so you can see what happens when
row 1: no labelling
row 2: manual aria label on term
row 3: manual aria label on definition

Is this a known issue?
Is it only voiceover and we can ignore it?
Any feedback gratefully received :)

[36degrees]

@colinbruce based on the video it looks like you might be using VoiceOver with Google Chrome, which as I understand it doesn't work as well (and is a less popular combination).

Are you able to test in Safari, and see if the issue occurs there?

[colinbruce]

Thanks @36degrees - it does look like a false positive for chrome and voiceover. Our test engineer re-tested with NVDA+Windows and Voiceover+Safari and found no issues.

[inulty-dfe]

Hi team,

We have a request for our design team to render the summary list as it appears on "mobile" viewports even when the viewport matches "Desktop".

Desktop	Mobile

How would you recommend approaching this?

I just basically applied the default styles to the media query that changed the display to a table.

.govuk-summary-list.govuk-summary-list--stacked {
  @media (min-width: 40.0625em) {
    display: block;

    .govuk-summary-list__row {
      display: block;

      margin-bottom: 15px;

      .govuk-summary-list__key,
      .govuk-summary-list__value,
      .govuk-summary-list__actions {
        display: block;

        margin: 0 0 5px;

        padding: 0;
      }
    }
  }
}

[JeennJeenn]

Hi all.

I wanted to share how we have decided to try a design solution with summary cards.

We have 3 different areas where we need a list of items that the user can select from.

We have quite a few requirements that all must work for the design to be successful:

• They must have the same design pattern to keep cognitive load low as they are all in the same bigger journey.
• In two areas, the user can select one item only.
• In one area, the user can select multiple.
• It must be clear which item they have selected.
• The list users select from can be endless.
• Each item must be able to display vast amount of sub information

So this is our currently solution that we are working with:

• Each item is presented as a summary card with an action to select in the header of the summary card.
• When user selects an item the colour reverse to the dark colour scheme, a selected status appear and action changes to 'Unselect'.
• When only one item can be selected, if use select another item, it automatically unselects the selected item.
• We have a 'Current selected [item]' at the bottom right above the Continue button, so user won't lose themselves.

Would be interesting if anyone else has had anything similar or trying a similar pattern as solution.
So far this has tested very well, both with visual users and screen reader users. It has also successfully gone through a DAC which is encouraging.