Review hover styles within header component

[paulrobertlloyd]

Description

This PR supersedes #1396, and doesn’t depend on (future) changes to global link styling.

---

Background

The header is a tricky beast as we know, and one area its complexity continually reveals itself is different sub-components having different link behaviours, due in part to their individual contexts and trade-offs.

Logo

The NHS logo is difficult to give a hover state to:

• Safari inconsistently renders the current dark blue outline applied to the NHS logo SVG
• Adding underlines or outlines to the NHS logo goes against identity guidelines

The logo may also be combined as a link with the service name:

• A service name may be any length, potentially wrapping to 2 or more lines
• Adding a background colour to a combined NHS logo and service name can look visually overbearing

The simplest, and most effective way to style these 2 elements, either linked as one or each separately:

• Change the colour or background colour of the NHS logo
• Add an underline to the service name

Navigation

Navigation links don’t need to be underlined as there is sufficient context that they link to different parts of a site. When combined with current section indicators, underlines can add visual noise, adding to the number of rules and lines in the header component.

One way to add a hover effect to navigation links, is to repurpose the visual indicator used for current items.

Account

As the account area can contain a mix of links and static text, here links need to be visually distinct from static text.

The best way to do this is to underline links.

Links on blue or white backgrounds

As the default header is blue, and all text is white, the only way to distinguish a hover state using colour is to use a colour that is vibrant and distinct from blue or reduce its transparency.

The white header on the other hand (and the navigation overflow menu) allows for using a greater range of colours.

---

Proposal

All this background is to underline (pun intended!) that there are no easy options, and a series of trade-offs need to be navigated (another!). This PR updates the hover states used in the header as follows.

Links on blue vs links on white

Links on a blue background, for all states, are white. Hover states distinguished by other factors.

Links on a white background are NHS blue, with hover using a darker shade, and active using a darker shade still. These colours are reflected in the hover and active state of the search submit button.

In the future (or now?), we might want to align these hover and active colours with those used globally, but as the hover state is currently purple, it looks a little odd, especially as the NHS logo is recoloured on hover.

Logo

On a blue background, the logo shape remains white but the letters of NHS logo go a darker shade of blue on hover, and darker still on active.

On a white background, the letters remain white, but the logo (and any organisation descriptor) share the darker blue hover and active colours used for white backgrounds.

The service name gets underlined on hover.

Account

Links (and buttons) are shown underlined, which disappears on hover (using the global behaviour for link underlines on hover).

On a blue background the links remain white, but as elsewhere, on a grey background (for the white header variant), the darker blue hover and active colours are used.

Navigation

Regardless of background colour, a navigation link gets a bottom border which shares the same colour as its corresponding label. There is no distinction between current and hover border styles, apart from the border on current items remaining persistent.

On a blue background, this means the bottom border remains white regardless of state.

On a white background, this means the bottom border, like the label, shares the the darker blue hover and active colours used on white backgrounds.

Implementation notes

I stripped back all link styles, reviewed alternative approaches and tried to find the best overall option. In doing so, I was able to simplify a lot of the code in the header (667 lines versus the current 740). This was achieved by:

• ~~Re-using the pseudo element for current navigation items for the hover state, and cascading styles for this element across navigation states and navigation colour variants~~ Fixed in #1428
• ~~Simplifying the method used to keep the account area visually the same size as the search input (using a negative margin instead of another pseudo element ‘hack’)~~ Fixed in #1428
• Removing the pseudo element ‘hack’ to style the NHS logo SVG by instead only changing its background colour
• Using a local private mixin to style navigation links

This separate local private mixin is required because links are (typically) not underlined and the focus states require the bottom black border to be inset. If in the future the global link mixins change, we may be able to remove this local private mixin.

I think this PR solves a few things, not least removed dependencies on later changes while also rowing back on some of the complexity we’ve introduced, and applying consistency around link styling where that is relevant.

All of which to say… probably best demonstrated by looking at the review app. Hopefully this gives enough (maybe too much!) background to this change.

Checklist

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [ ] CHANGELOG entry

[frankieroberto]

@paulrobertlloyd any reason not to use the lighter tint of the blue for the hover state of the navigation, instead of the white, as in https://github.com/nhsuk/nhsuk-frontend/pull/1396#issuecomment-2988526800?

For the logo hover state on the blue background, I'm not quite sure the hover state of the letters going a darker shade of blue works - for me it somehow feels a bit jarring, perhaps because it ruins the illusion of the logo being a kind-of stencil with the letters being cut-out and just showing the background through? Did you try changing the white colour at all? Alternatively, could we use the same technique as used by the focus style to add a border (box-shadow?) or does that not work consistently in Safari either?

[paulrobertlloyd]

The problem with changing the logo from anything other than white is that it looks muted, whereas a hover state should, in my mind, feel more the opposite.

I’m also trying ensure the hover states are globally consistent across background variants, while also be (reasonably) internally consistent across links within the various sub-components. It’s a series of trade-offs.

Take a look at #1422. This uses a lighter blue colour for the hover states for links on the blue header… they look diminished, but perhaps enough to get away with?

[anandamaryon1]

Great summary @paulrobertlloyd thank you.

Annoyingly my preference is somewhere in between your two options.

Logo + name

Prefer the full colour change, rather than only the darker lettering 'inside' the logo, since the logo to me feels monochrome and the darker letters is too subtle. However, I feel this should apply to the logo but not to the service name, where, because it's text, it should behave more standardly, which at the moment is underline on hover.

Account

Link styles here is a trade-off but I agree the right decision, to keep them unchanged, ie. underlined.

Navigation

Colour change on hover to the light blue feels odd to me, and I don't think it's necessary, with the bottom-border underline style in close proximity. I'm fine with the bottom-border size being 4px and solid white, for simplicity's sake.

[paulrobertlloyd]

@anandamaryon1 Updated this PR, take a look at the hover states now.

I think I’m broadly fine with this (again, trade offs), but I do think having the logo and service name behave different gives this a disconnected feel.

My personal preference would be to keep it so that both the logo and service name go light blue on hover (when on a blue background, dark blue when on a white background) as a cohesive unit, with no text decoration. Perhaps best demoed in person… I’ve got the header on my screen now with 3 different links in close proximity, with 4 different hover states. Feels a bit discombobulating:

[paulrobertlloyd]

This PR also fixes print styles used in the header. I’ve pulled part of this fix into #1434, but having simplified and abstracted all the various bits of link styling into a mixin in this PR, fixing the colours of links when printed was easier to do here.

Before

After

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[colinrotherham]

I've rebased this @paulrobertlloyd so the correct macro options and item html are in

From PR https://github.com/nhsuk/nhsuk-frontend/pull/1434 what can we do about this comment?

However, I note that the NHS logo has disappeared again, and the service name appears grey. I’ve been able to fix this in https://github.com/nhsuk/nhsuk-frontend/pull/1419, but it’s a bit hard/late to unpick the link styles again here!

Can the fix be pulled out separately?

Other than the hover styles in review, got a few things in the visual diff:

"Manage patients" colour change

Focus text colour (one example only)

[paulrobertlloyd]

The first colour change is deliberate, the second one, not so much 😄

[anandamaryon1]

I'm thinking now that we'll need to tackle this in tandem with the underline styling more generally, and perhaps, once combined we might want to consider the underline for logo and service name again, but aligning it with the new underline's hover state, eg.

(Showing logo + header hovered and 'Create user' hovered too, for comparison. Other links not styled with new underlines)

[paulrobertlloyd]

Closing this issue for now; we can return to some of these ideas when we revisit global link styling.