Add styling for the cookie banner component

[hannalaakso]

What

Following on from #2114 and #2114, add the styling for the cookie banner component.

The designs are shown here: #2107 (comment) Additionally, the heading and content should be constrained to 2/3 grid column, whilst the button group should be full width on desktop.

Spacing

The component does not set bottom spacing. The bottom spacing should be created by the items inside the component.

Hiding sections

We're going to use the hidden attribute to hide sections as this will hide the content even if CSS fails to load.

display: none; will act as a fallback for legacy browsers (IE 8-10) that don't support the hidden attribute. Unfortunately it looks like Lynx doesn't support hidden but that's a vendor implementation issue. It also appears that Lynx hasn't been in active development for some time. Using the hidden attribute seems like the semantically correct thing to do here and it makes the component usable when CSS fails to load.

(The alternative would be to insert text into the DOM at relevant points which could also be a suitable solution in some contexts. We decided against it as the Design System components need to be really flexible so we're trying to avoid patterns where HTML markup needs to be maintained inside JavaScript which will also simplify localisation etc. where relevant.)

Border

Visually separate the cookie banner from content underneath with a transparent bottom border when user changes colours in their browser.

Remove visible focus indicator from cookie banner

when the element is programmatically focused.

The focused cookie banner is the first element on the page and the last thing the user interacted with prior to it gaining focus. We therefore assume that moving focus to it is not going to surprise users, and that giving it a visible focus indicator could be more confusing than helpful, especially as the element is not normally keyboard operable.

We will flag this in the research section of the guidance as something to monitor.

A related discussion: w3c/wcag#1001

(It's also worth noting that this is different to what we do with the notification banner which does have a visible focus indicator. However, the notification banner is further down the page and the user might not have interacted with it prior to it gaining focus. It is therefore helpful to indicate to users that the focus has moved to it, even though the element, like the cookie banner, isn’t normally keyboard operable.)

Fixes #2098 and #2112

Tested on

✅ Chrome 88 (Mac)
✅ Firefox 84 (Mac)
✅ Safari 14 (Mac)

✅ Chrome 85 (Windows)
✅ Firefox 85 (Windows)
✅ Edge 88 (Windows)

✅ Chrome (Android 10)
✅ Firefox (Android 9)
✅ Samsung Internet (Android 10)

✅ Safari (iPhone 12 , iOS 14)
✅ Chrome (iPhone 8, iOS 13)

✅ IE11 (Windows 10)
✅ IE10 (Windows 7)
✅ IE9 (Windows 7)
✅ IE8 (Windows 7)

When users change colours in their browser (Firefox 84)

[christopherthomasdesign]

At smaller sizes the link text isn't quite vertically centred in the space below the buttons:

I think taking 5px off the bottom of the banner should fix it.

[vanitabarrett]

Great work, looks awesome! 🎉

[36degrees]

🎉