Only underline links in header upon hover

[paulrobertlloyd]

Description

Updates all links in the header component to only appear underlined upon hover.

Related discussion:

• Add current item indicator for header navigation #1067 (comment)
• Header updates - breaking changes #1058 (comment)

Checklist

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

[frankieroberto]

Works for me.

[anandamaryon1]

@paulrobertlloyd
Overall I like it, but now we do have a slight issue whereby account information and links are not distinguished visually. Feels very non-optimal for users to not be sure whether an item is a link or not.

[frankieroberto]

@paulrobertlloyd Overall I like it, but now we do have a slight issue whereby account information and links are not distinguished visually. Feels very non-optimal for users to not be sure whether an item is a link or not.

Maybe this is a reason to recommend ONLY putting links in the account section of the header? If you need to show the current user’s name or email, those could be clickable to a profile/settings type page?

[anandamaryon1]

@paulrobertlloyd Overall I like it, but now we do have a slight issue whereby account information and links are not distinguished visually. Feels very non-optimal for users to not be sure whether an item is a link or not.

Maybe this is a reason to recommend ONLY putting links in the account section of the header? If you need to show the current user’s name or email, those could be clickable to a profile/settings type page?

Hmm interesting. I was assuming we would have services that are fairly simple / MVP that do not have account settings pages, but I suppose you could at least link to a page that says "You are logged in as Mr.X" or "Your role is Admin", etc. ?

[frankieroberto]

@anandamaryon1 maybe? Worth noting that we already don’t have the underline on the service name, and #1109 technically proposes allowing both the NHS logo or service name to not be linked (although probably we’d recommend that both should be linked most of the time?).

[frankieroberto]

(Feels like there’s a reasonable expectation for everything in the header to be clickable, even if the Nunjucks params don’t technically enforce it?)

[paulrobertlloyd]

Overall I like it, but now we do have a slight issue whereby account information and links are not distinguished visually. Feels very non-optimal for users to not be sure whether an item is a link or not.

This is easier to address on the white version of the header, whereby non-linked items could use a different text colour, either the text colour or as I have here, the secondary text colour:

It’s harder to achieve something like that on a blue background though. Here’s a quick try, I tested the values in a contrast checker and they do pass, so maybe it’s a goer?

When it comes to logos/service names, I’m not sure whether the same rule should apply… possibly for an unlinked service name, but the NHS logo and organisational logos should remain untouched. Maybe this is something we only need account for in the account area?