Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve summary list guidance #1997

Merged
merged 1 commit into from
Dec 13, 2021
Merged

Improve summary list guidance #1997

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/components/summary-list/index.md.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,25 @@ Do not use it for tabular data or a simple list of information or tasks, like a

There are 2 ways to use the summary list component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.

### Summary list with actions
{{ example({group: "components", item: "summary-list", example: "without-actions", html: true, nunjucks: true, open: false}) }}

### Adding actions to each row

You can add actions to a summary list, like a ‘Change’ link to let users go back and edit their answer.

For sighted users, the actions get their context from the other content in the row they appear in.

Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.

To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like ‘Change name’ or ‘Change date of birth’.

{{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}

### Summary list without actions

{{ example({group: "components", item: "summary-list", example: "without-actions", html: true, nunjucks: true, open: false}) }}
### Removing the borders

### Summary list without borders
The summary list includes some separating borders to help users read each row and its action.

If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `govuk-summary-list--no-border` class.
If your summary list does not have any actions, you can choose to remove the separating borders with the `govuk-summary-list--no-border` class.

{{ example({group: "components", item: "summary-list", example: "without-borders", html: true, nunjucks: true, open: false}) }}

Expand Down