Update footer links to use new focus style

[NickColley]

V3 focus styles

V3 focus styles with legacy mode turned on

Pre-v3 focus styles

Closes #1320

[36degrees]

@dashouse are you happy for this change to be made in 'compatibility mode' as well?

[NickColley]

Good shout, will see what @dashouse thinks.

[36degrees]

Looks good – one minor comment, and want to check that Dave's happy with the text-decoration change being applied in 'compatibility mode'

[36degrees]

Is the positioning of this important (coming after the pseudo-classes)? If so, might be worth a comment as I think we generally try and do our includes together at the top of the ruleset.

[NickColley]

Yeah we tend to put focus styles at the end of the block, I would prefer to have the mixin only contain properties to avoid this confusion.

I've had to do this in a few places to make sure the focus is applied correctly without needing to undo CSS.

It's on my list of things to consider once we've done all the work and know what the mixins need to do...

[dashouse]

Sorry if this wasn't clear but the links that are inline within a paragraph should have an underline. In this case that would be Government Digital Service and Open Government Licence v3.0

Regarding the legacy mode, should probably keep the underlines if it's not too much trouble.

[NickColley]

Spoke to people on Slack, since people using govuk_template wont be using this component, it seems like it's not a big importance to add the old behaviour.

[dashouse]

Did you manage to make the inline link change? the preview is dead now

[NickColley]

Note that this style was updated in this pull request: #1491

[NickColley]

Some context on why we removed underlines from @36degrees:

I believe the intention was to treat the links in the footer in the same way we treat other navigational elements – like the header, or in the case of the Design System the side navigation. Where the ‘thing’ is a ‘list of links’, the thinking is/was that they don’t need the underlining because there’s no wider context in which they need to be distinguished. The exception is any link that does appear within e.g. a paragraph, in which case it does need the underline to distinguish it. It has been questioned a few times on support recently though.

The benefit, I believe, is that it allows us to have a clear hover state for those links, which we didn’t previously have