[refs #384] Create summary list component from GOV.UK

[chrimesdev]

Description

Summary list component styles, markup, macro and documentation taken
from the GOV.UK Frontend.

To do

• Design sign off (@davidhunter08)
• BackstopJS tests
• Screen resolution, browser and accessibility testing

[chrimesdev]

@davidhunter08 would you be able to have a look at the design (spacing etc) and let me know if you're happy with it.

@GrilloPress if you want to have a look too and feedback anything 👍

[davidhunter08]

@AdamChrimes - Design (spacing etc.) looks ok.

[chrimesdev]

Thanks @davidhunter08, @mcheung-nhs please could you have a look when you are back. 🌤

[GrilloPress]

Looks good generally. Big fan of the links going to the left-hand margin on mobile.

Two thoughts:

1. Word break attribute seems to be causing some issues with the contact information label
   

2. Wrapping <dl> in <div>

Just working through some issues with GDS about this. Technically it may not be valid HTML to wrap the <dt> and <dd> inside a <div>.

Axe interprets the rule as a strict <dt> must have a parent of <dl>

I'm interpreting https://www.w3.org/TR/html5/grouping-content.html#the-dl-element as meaning that we can have <div> children of <dl> but waiting for GDS to get back to me.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#Wrapping_name-value_groups_in_%3Cdiv%3E_elements

[GrilloPress]

Dave House from GDS confirmed my interpretation of the HTML spec. From GDS point of view.

So wrapping<div> is fine. But will trigger some accessibility tools to raise an error. DAC also raised it to us but I'm challenging them on it.

Something to be aware of.

[joelanman]

Related work in Axe: dequelabs/axe-core#1284 (unreleased I think)

[mcheung-nhs]

I would also interpret the W3 specs mentioned that a <div> is allowed in a <dl>.
Also, running the code through the W3 HTML5 validator doesn't bring up any issues.

Looking at further discussions with the axe-core library (dequelabs/axe-core#262) it seems there are no issues from a screen reader point of view.

Therefore I'm happy for this to be merged and we'll have to put any exceptions if/when we implement axe in our CI.