Header updates - breaking changes

[anandamaryon1]

Description

Bringing together a series of breaking changes from the following PRs:

• Remove hardcoded Home link from navigation #986
• Simplify template logic for header component #996
• Increase contrast of focused NHS logo in header #1047
• Refactor header component styles #1059
• Change primaryLinks to use href and text instead of url and label #1083
• Add current item indicator for header navigation #1067
• Show account information and links in the header #1063
• Update header navigation label #1073
• Header breaking changes nunjucks params #1109
• Only underline links in header upon hover #1136
• Left align header navigation items by default #1138
• Support form submission from header account items #1155

Checklist

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

[anandamaryon1]

@paulrobertlloyd found an issue with your logo SVG change (#1047), when printing the NHS logo no longer shows. Not looked into the code but I assume it's just missing a rule to change it's colour from white to blue on print?

[frankieroberto]

@paulrobertlloyd could we avoid force pushing to this branch for a bit? Makes it harder to maintain the other pull requests into this branch. We can sort out the commit history at the end?

[anandamaryon1]

Accessibility and device testing

Tested with NVDA, JAWS and VoiceOver, all work as expected.

Tested on Safari on Mac, and Edge and Chrome Windows. Android devices Galaxy 21 Samsung browser and Pixel 6 Chrome, all as expected. Tested on iOS Safari, all as expected on version 15 and above.

Issues

Two issues discovered on Safari 14 (iPhone 8, iPad mini 2019 & iPad air 4) and below:

1. Flexbox gap is not supported.
2. Search input gets styling applied to round it's corners.

These issues do not affect the current header implementation.

Raises a wider question of our browser support which has not been updated in 3 years. nhsuk/nhsuk-service-manual#2063

[davidhunter08]

Following on from a previous comment on underlining the nav links, I noticed gov guidance on underlining links...

links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are on the page.

I mocked up a header for the NHS App (using the new 'account info' variant)...

I thought I'd see how it looked without underlines (and removed the justify-content: space-between;) and it feels cleaner/more legible IMO...

[anandamaryon1]

@davidhunter08
Comparing side by side, it does look a lot cleaner with less visual noise.

Horizontal justification of the links also helps in your example. It works well on nhs.uk due to the number and length of links, but as a rule for all headers it may not make so much sense.

If we're going to do it, this is the time and this is the PR.

Thoughts @frankieroberto @paulrobertlloyd ?

[paulrobertlloyd]

• Maybe we only underline navigation links on hover? It’d be good to have some way of differentiating between things that are links and those that are not (this largely applies to the account area, where some items may be text only)
• I’d love for the justification of the links to no longer be the default; maybe we can provide a class to enable justification (opt-in instead of opt-out)?

[frankieroberto]

➕1 for removing the underlines from the horizontal nav (except maybe on hover) and removing the default justification.

It would also fix the currently-misleading issue that the 'More' toggle button uses an underline, and so might be mistaken for a link.

[colinrotherham]

I've resolved the conflicts and fixed any new Stylelint issues

Presume the visual regression tests failed before?

[paulrobertlloyd]

Issues found during accessibility and device testing

@anandamaryon1 I looked at how we might use margins instead for navigation items instead of flexbox in #1138, but it got complicated quickly (given we’re also supporting optional justification, and JS-enabled items moving into a collapsible menu). I suspect the same is true for other areas where the design falls apart a little due to its reliance on using gap with flexbox.

I think the bunched up navigation items are the primary concern. This was previously mitigated against because items had generous padding to their left and right. With that padding removed, navigation items will line up closer to each other.

Safari on iOS is a pain because users can’t upgrade Safari, and any other browser on the platform is forced to use the same underlying Webkit rendering engine. Once OS updates are no longer provided, the user is stuck with the last supported version of WebKit, which in the above case is 14.

This is even more so annoying because this version supports grid layout and therefore gap/column-gap/row-gap properties, but does not support using these properties for Flexbox containers. I’m not sure if we can test for this, even by using @supports feature queries.

Curious to hear if others have suggestions for how/if we can fix the above noted issues for older browsers. @frankieroberto @colinrotherham

[paulrobertlloyd]

Following on from the above, #1138 (which left-aligns navigation items by default) should now also fix the issue of navigation items appearing too close together in Safari 14.

[anandamaryon1]

DSRP account header feedback summary

The design system review panel has reviewed this component and provided the following feedback, which we will look to address before releasing.

Component design (frontend)

• Is the dark blue background on account links necessary? Does it make the account links overly prominent?
• Ensure very long emails do not break the layout
• Review wrapping of elements within custom HTML items

Component guidance (service manual)

• Should there be more guidance on how to display user names, roles etc.?
• Should the log out button be optional or responsively shown, worry it could be error-prone on mobile
• If using, the new dark blue background colour needs to be added to design system, or an existing colour should be used instead
• Emphasise the fact that this has been designed for staff-facing systems, consider releasing as experimental
• Add further guidance to encourage testing to inform account header information and links to be displayed, eg. "user testing should inform which combination of elements will best meet user needs"
• Highlight the fact that items can be links and non-links (information)
• There could be potential for a future pattern for changing role/organisation
• Provide guidance on search placeholder text