Add summary list component

[dashouse]

This component was initially developed to allow us to build the
'check your answers' pattern.

It is mostly the same as in the original pattern with some notable differences:

• On smaller screens it wraps by default
• It's possible to have multiple actions

Review

• Review application: https://govuk-frontend-review-pr-1065.herokuapp.com/components/summary-list

• Original GOV.UK Prototype Kit implementation: https://govuk-prototype-kit.herokuapp.com/docs/templates/check-your-answers

Todo

• Consider visuallyHiddenText feature instead of using html
• Improve the options descriptions
• Assistive technology final run through

https://trello.com/c/kh2atSrd/1612-add-summary-list-component-to-govuk-frontend-pair

[NickColley]

I'm wondering if we should rename the classes to something like

.govuk-summary-list__key {}
.govuk-summary-list__value {}
.govuk-summary-list__actions {}

@dashouse can we only include modifiers that we know are needed for check your answers?
Reducing the API surface is good if possible, but if you think some of these modifiers are definitely going to be used I won't block that.

Additionally, can we just always do the break wrap behaviour? I'm worried that in the real world it's not realistic for people to conditionally apply classes based on content.

This would also mean users of zoom text, would always have the actions on the left.

[dashouse]

I think there was some desire to get away from the "key value pairs" name, I'm not sure if that extends to class names too but I'm not precious about any of it.

Regarding the wrapping as default, let me talk to Joe as I think he designed it originally. The only reason I didn't do this was that the current pattern doesn't.

The modifiers were there to make it meet the needs for more than 'Check answers', although I'm not sure we need the text align one as that would be an easy modification to make for someone / could be a universal override.

p.s. Looking good, I think a few of the CSS changes you've made have changed the spacing a little. We can go through this when we're in the same room if that's easier.

[joelanman]

Just to note datalist is an existing html element so we might not want to reuse the name:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

[fofr]

Current screenshot for interested onlookers:

https://govuk-frontend-review-pr-1065.herokuapp.com/components/data-list

[NickColley]

I went through the API proposal with the development team and we agreed with the current approach.

API proposals discussed

Classes functionality, now:

{{ govukDataList({
  "keyClasses": "govuk-!-width-one-half",
  "valueClasses": "govuk-!-width-one-quarter",
  "actionsClasses": "govuk-!-width-one-half",
  "rows": [
    {
      "key": "Name",
      "text": "Firstname Lastname",
      "actions": [
        {
          "href": "#",
          "text": "Edit"
        },
        {
          "href": "#",
          "text": "Delete"
        }
      ]
    }
  ]
}) }}

Alternatives:

{{ govukDataList({
  "rows": [
    {
      "key": {
        classes: 'key-class',
        text: "Name"
      },
      "value": {
        classes: 'value-class',
        "text": "Sarah Philips"
      },
      "actions": {
        classes: 'actions-class',
        items: [
          {
            "href": "#",
            "text": "Change"
          }
        ]
      }
      ]
    }
  ]
}) }}

or maybe

{{ govukDataList({
  "rows": [
    {
      "keyClasses": "govuk-!-width-one-half",
      "key": "Name",
      "classes": "govuk-!-width-one-quarter",
      "text": "Firstname Lastname",
      "actionsClasses": "govuk-!-width-one-half",
      "actions": [
        {
          "href": "#",
          "text": "Edit"
        },
        {
          "href": "#",
          "text": "Delete"
        }
      ]
    }
  ]
}) }}

I think by nesting it's more verbose but allows us to allow for text/html consistently too?

[NickColley]

Tested in assistive technologies and they're all consistent with the Prototype Kit but I wonder if we do want this behaviour...

VoiceOver OSX:

Links read "name Change" when I expected "Change name", this might be consistent with #1096

NVDA 2018: "Change name"
JAWS 17: "Change name"

On iPhone this is worse since it doesnt read out the visually hidden text at all...

[NickColley]

Without more investigation and thinking I'm not sure I can make a decision on if this should ship as is, it is consistent with the GOV.UK Prototype Kit implementation.

Ideally I think we should talk to the accessibility team and try to come up with how we might resolve the general issue of our govuk-visually-hidden class (#1096).

I don't believe there's any hard deadline for this component, so it could wait until we've figured out the best way to proceed.

Alternatively we could change how this component works to use ARIA, by replacing 'visuallyHiddenText' with 'accessibleName' as follows:

{
  text: 'Change',
  accessibleName: 'Change name'  // see https://www.w3.org/TR/accname-1.1/
}

<a href="#" aria-label="Change name">Change</a>

[dashouse]

It looks like somewhere in the code refactoring we’ve lost the styling for the summary list, with borders but without actions. This means the spacing looks like this on small screens:

I'll give this a go

[dashouse]

Latest commit adjusts small screen spacing for actions

And increases spacing when there are no actions (with a new class govuk-summary-list--no-actions .

[dashouse]

@NickColley Thanks, of course. This will just work now, just moved the margin cbee09e

[NickColley]

Based on the results of #1096 I think we should stick with the current approach, we can improve this in the future if we want to, so this is ready for final review.

[36degrees]

There's one minor issue with one of the examples.

Otherwise this generally looks great 👍 Top work 👏

[36degrees]

Minor – this last link doesn't have any text, so you get an empty link at the end of the actions.

[36degrees]

😆👌

[aliuk2012]

Amazing work @NickColley & @dashouse!!

[joelanman]

great work everyone :)