Summary

[bameyrick]

Use this place to discuss the summary component in the ONS Design System

[bameyrick]

The breakpoint for changing from layout to have question, answer, and action all on one row, vs question above answer and action is currently set to > 25 chars for the answer length. This could probably be bumped up to 50 chars.

[bameyrick]

As discussed with @will-madebymoon, the answer column needs a greater width bias, but still be flexible for translations/different actions etc.

[bameyrick]

As discussed with @will-madebymoon, we should remove the mode for wrapping answers below questions on desktop.

[will-madebymoon]

Move the answer over in the summary providing more space to the question and so that the change link is closer to the actual answer

[bameyrick]

The condition that checks if a rowItem has values does not work in jinja2

[bameyrick]

The action spacer element (pipe) is being read by screen readers.

[bameyrick]

When the summary is within a question (e.g. household collector), the first row should not have a top border and the last item should not have a bottom border.

[bameyrick]

As discussed with @will-madebymoon and @boxadesign we should remove the top border from the first row, and the bottom border from the last row.

[bameyrick]

We need to add the top border back on to the first item always so that zoom text users can discover the action links.

[jrbarnes9]

The HTML used to emphasise parts of a question title has been included in the aria-label associated with the ‘Change’ link on the summary. This could confuse some users navigating out of
context who may be unaware of the purpose or meaning of the HTML.

<td class="summary__actions">
<a href="/questionnaire/accommodation-type/#accommodation-type-answer"
class="summary__button" aria-label="Change your answer for: What type of
accommodation is <em>68 Abingdon Road, Goathill</em>?" data-qa="accommodationtype-answer-edit">Change</a>
</td>

[jrbarnes9]

Inconsistent borders in household collector summaries...

...proposing to always display a bottom border on a summary if a link follows...

[jrbarnes9]

Multiple/grouped summary example is broken

[jrbarnes9]

Long words breaking summary

[Al-Davies]

#Summary User Research
tested as part of eQ usability testing 7 March 2022 (testing involved creation of hub page with sections asking participants to provide monetary values spend on certain goods/services)

• Participants were clear on reaching the initial summary page that they could review and change their answers
  • Changes to answers resulted in updating of the overall spend on a group of items e.g. food, participants understood this was happening
• Once initial four sections had been completed, another section was added to the hub, which summarised the previous sections where monetary values had been added.
  • Participants didn’t naturally question this, those who just viewed it understood it’s purpose. Those who were asked their expectations around this newly added section thought it may contain more questions, but again, understood it’s purpose when they went into the section.
• Participants saw the overall summary as a triple check of their answers
• Again, participants all able to change previously entered values from the overall summary screen, moving through utility bills section to amend total given for water.

[jrbarnes9]

Summary parameter rowTitleAttributes should be part of the row object, not the rowItem object

So it sits alongside the rowTitle.

[jrbarnes9]

#2275 #2185

[jrbarnes9]

Fixed by #2506

[jrbarnes9]

eQ recently encountered new use cases with list collectors within grouped summaries. It would be worth reviewing the recent enhancement to the gov.uk design system as a possible solution: alphagov/govuk-design-system-backlog#210