Add footer component

[NickColley]

👉link: https://govuk-frontend-review.herokuapp.com/components/footer

New version of the GOV.UK Footer based off the work done in the GOV.UK Design System.

Notable changes

• Macro interface that supports custom navigation and meta navigation.
• B.E.M.
• Uses flexbox for sizing sections
• Uses 'columns' for splitting the footer list (potential accessibility improvement)
• Uses inline SVG for OGL logo (can be see in inverse)
• Changes OGL logo from duplicate link to presentational element.
• Copyright crest has touch area that is more appropriate.

Testing

Inverse colours ✅

Cross browser testing ✅

Known issues:

• Note that some of the older browser have centered crest logo, this is now left aligned to fix an issue and section break. Has been tested with my eyes but not re-screenshotted.

IE8

Fixed (html5 shiv):

IE9

IE11 (IE10 looks similar)

Edge

Windows, Chrome

Windows, Firefox

Mac, Safari

Mac, Chrome

Mac, Firefox

iPhone 6s

After fix:

iPhone X

Android, Chrome

Android, Firefox

Windows phone

After fix:

---

Operating system	Browser	Tested
Windows	Internet Explorer 8-10	✅ Windows 7, IE 8 - 10
	Internet Explorer 11	✅ Windows 7, IE 11
	Edge (latest versions)	✅ Windows 10, Edge 16
	Google Chrome (latest versions)	✅ Windows 10, Chrome 64
	Mozilla Firefox (latest versions)	✅ Windows 10, Firefox 58
macOS	Safari 9+	✅ macOS High Sierra, Safari 11- macOS El Capitan, Safari 9.1
	Google Chrome (latest versions)	✅ macOS High Sierra, Chrome 61
	Mozilla Firefox (latest versions)	✅ macOS High Sierra, Firefox 57
iOS	Safari 9.3+	✅ iPhone 6S, iOS 9, Safari - iPhone 6, iOS 8, Safari - iPhone 7, iOS 10, Safari
	Google Chrome (latest versions)	✅(see Safari iPhone 6s) iPhone 6s, iOS 8, Chrome
Android	Mozilla Firefox (latest versions)	✅ Samsung Galaxy S8, Firefox
	Google Chrome (latest versions)	✅ Samsung Galaxy S8, Chrome
Windows Phone	Internet Explorer (latest versions)	✅ Windows Phone, Lumia 930 8.1

Assistive technology testing ✅(see notes below)

Software	Version	Type	Browser	Tested
JAWS	15 or later	screen reader	Internet Explorer 11	✅Jaws 18 works fine, Jaws 17, Jaws 16, Jaws 15
ZoomText	10.11 or later	screen magnifier	Internet Explorer 11	✅Right most column could be missed, however underlines in headings could help lead people but that's not guaranteed.
Dragon NaturallySpeaking	11 or later	speech recognition	Internet Explorer 11	✅Clicking on links and images works
NVDA	2016 or later	screen reader	Mozilla Firefox (latest versions)	✅headings can be read out, lists are announced as expected, images have accessible names, passes criteria
VoiceOver	n/a	screen reader	Safari 10 (or higher) on Mac OS X 10.10, and iOS 10.3 (or higher)	✅headings and lists can be tabbed through and make sense.

Accessibility questions

1. Should the lists be associated with their headings?: This seems to be a pattern used with navigation roles so will avoid this for now and go with how it currently works.
2. Should the footer use role=contentinfo? Or just the meta section (http://www.brucelawson.co.uk/2013/why-does-html-take-rolecontentinfo/): Yes, top level, explained in accessibility criteria.
3. Should the navigation use a navigation role? I know Leonie has warned in the past about too many navigation landmarks: No, explained in accessibility criteria.
4. Should change aria-hidden on OGL icon to role=presentation?: Decided to make this change.

Accessibility notes

When tabbing through on IE11, 'All content is avaliable text' span is tabbable, this happens with and without Jaws 18. Does not read out as a link, but just text so does not feel like a barrier but might be worth investigating.

As part of https://trello.com/c/hSF9zpJP/241-3-fe-footer-component

[36degrees]

Nice! This is looking really good so far 💯 👍

[NickColley]

@dashouse this component uses non-standard greys, is this an exception? Should we iterate this so it doesnt have it's own custom colours later?

[dashouse]

Mainly the colour of text? The background is an existing colour?

Agreed, probably something to iterate later as it's the same as the Design System and GOV.UK

[36degrees]

Given that these numbers appear in a number of places with comments, it might be a good idea to break them out into variables:

.govuk-c-footer__copyright-logo {
  // Dimensions of the crest image at retina resolution
  $crest-image-width: 125px;
  $crest-image-height: 102px;

  display: block;
  min-width: $crest-image-width;
  // ...
}

[NickColley]

Good shout

[36degrees]

Worth trying to see if this can be optimised – a quick play with http://petercollingridge.appspot.com/svg-optimiser suggests we can shave a few hundred bytes off this.

[NickColley]

Yeah I've already optimised it, those bytes could be from putting it on a single line which I figured is whitespace that'll get GZIPed but I'll double check.

[36degrees]

👍

[NickColley]

Confirmed the extra savings come from the whitespace

[joelanman]

This seems to have different breakpoints to whats currently on GOV.UK, is that ok? GOV.UK goes to a single column quite quickly as you make the browser narrower.

[alex-ju]

Looks great to me @NickColley! 💯
Happy to approve it anytime, but I'll wait for the initial reviewers to take a look too.

I have only one question: shall we try and put in more accessibility on the SVG (I think it's the first inline SVG in the library)? I was thinking of having a <title> and maybe even a <description> for more complex SVGs; and maybe bind them to the <svg> with aria-labelledby to extend the number of ATs that are using them. It doesn't seem to bring much value for our OGL, which is already explained in the next element, but more of a thought about inline SVGs in general.

[NickColley]

@joelanman that's intentional, flexbox allows for more granular reflow.

[NickColley]

@alex-ju the SVG is presentational so any additional properties would not be exposed to users of assistive technologies.

Definitely agree if we use SVGs inline that are not presentational we should take extra care to do as you've described.

[hannalaakso]

This is looking great, thanks @NickColley.

Something we noticed earlier today was the poor contrast between the link colour and the hover state link colour. I didn't actually realise the colour changed the first time I tried it! Might be worth @dashouse having a look.

None of my comments should be considered blocking though (the hover colour issue mainly because the same issue exists on the current GOV.UK footer).

[hannalaakso]

This heading bottom border doesn't currently exist on GOV.UK footer on mobile (see screen grab). This might have been a design decision though? I think it's possibly an improvement on the existing thing.

[NickColley]

I figured that was a mistake so wanted to make the new version more consistent.

[hannalaakso]

That's cool. It does look better now compared to the current slightly bunched up mobile view 👍

[NickColley]

Thank @dashouse's patented spacing scale 🌈

[hannalaakso]

I'm sure there's a good explanation for this but I'm not clear why the accessibility criteria are in the YAML file?

👍 for adding them.

[NickColley]

I imagined eventually we'd want to expose these somewhere, either in the README, Design System or Review application.

For now it's in the yaml.

[joelanman]

I think it might be safest to proceed with the same column/breakpoint logic as currently exists. In this PR you can end up with some odd column width ratios, that don't fit our grid, for example:

[NickColley]

@joelanman I'll see if I can make it 1:1 at tablet.

[NickColley]

@joelanman updated based on your feedback, looks more balanced and less chaotic now 👍

[NickColley]

Need to add a changelog entry before merging.

[joelanman]

Looks good from a design point of view - needs a code review

[NickColley]

Spoke to @amyhupe, I've made some updates based on an initial conversation.

We're going to noodle on the content for the accessibility acceptance criteria, but can be updated later since this guidance is not exposed anywhere to users yet.

[alex-ju]

Code reviewed.