Improvements to the header component

[36degrees]

What

The header needs to be more flexible – for example, it should allow for just having one navigational link without that link ending up in a menu on mobile; it should allow custom HTML so that you can include a sign out button (styled as a link).

There might be things we can do to make the header more useful in other contexts - eg, full-width, departmental, admin, caseworking systems, etc.

We should also review the backlog entry for the Header component to see if there are any other outstanding issues we should be looking to address.

Stories

Should

• Axe issue: "All page content must be contained by landmarks" #1604
• Header Component - Custom HTML option for links #1573
• HTML validation error: 'Possible misuse of aria-label' in header #1340 (breaking change)
• Provide guidance around using the header for non GOV.UK contexts govuk-design-system#1174
• Make it possible to override or remove the Crown logotype from the header #1639

Could

• Header should support a single link without collapsing to a menu on mobile #1635
• Product name wraps onto new line with non full-width header #1502
• 'Unlabelled graphic' read out within header using NVDA #1636
• Header navigation text cannot be customised or translated #1682
• Make 'menu' text in header customisable #1904
• Provide guidance and examples for different width pages govuk-design-system#1171
• Provide guidance and examples for using product names in the header govuk-design-system#1172
• Use SVG lockup for GOV.UK in header #1739 (breaking change)

Done when

• Review from GOV.UK Publishing before releasing

[NickColley]

We caught up with Max and Ian from GOV.UK Publishing and agreed that they should review our proposed changes to the header (and footer) to ensure it makes sense for their use case.

Work in progress branch with header updates: https://github.com/alphagov/govuk_publishing_components/tree/rebased-add-layout

Meeting notes

Vanita did most of the work on it.

[What are you doing?]

Trying to get rid of alphagov/static, renders the header and the footer, outline for the page.

Two things: one is to update the font, colours. Ian's concentrating in static.
Ultimately we dont want to be using static, as it's legacy. In terms of layout trying to put it into the components gem.

Vanita started that work in august, cross govuk [publishing] frontend concern.

Now we (frontend and accessibility). Main goal for this team, bring everything to bring everything up to WCAG standard. Secondary goal improve layout.

Started with Mia, had things to fix. Two weeks before Brexit stalled that.

Main concern was bringing things up to meet WCAG standards, way to do that is to implement the design system.
As time as gone on, there's so much legacy that we're fighting with, try and get rid of static.

Meantime try and make static better than it was.

Some of the stuff static does that's complex, for example banners. Particular workflow, replicating that through components is yet to be solved.

[Backend / ops blockers]

Far in the future.

[Design System header / footer]

Footer didnt meet needs, need to replicate whats live now. Got a consultant designer, designer doesnt have time to consider full width.

[Header?]

Vanita built some stuff. I'm make it work with alternate layout.

[Alternate layout?]

Go google for how government works.

Header with search on left and links on the right.

rebased-add-layout

[Have you ran into any other issues?]

Main issue was trying to play nicely all at once, multiple different options on the header.

[Do you have a list of header test cases]

Component guide.

Pretty much everything implements govuk_template which lives in static.

[Design decisions?]
Make it look like it does now. Did make on the alternate layout for the header. On whitehall page mobile size you've still got the menu button on the right, left for magnifiers.

[How do you want]
Design System team get your review on it, and might ask questions in design phase.

[Dave H has an inventory]

Consultant Designer: Simon W

No freedom to redesign right now though due to time.

[Better comms on breaking changes.]

[vanitabarrett]

@36degrees Just wanted to check - does this include #1904 ? It came up in the Friday call today and I wasn't sure if it was included in this work as it has been split out from #1682