Focus state on neutral header variant is not accessible

[daniellecorke]

Background/Issue

Several issues with the Neutral header for multi-coloured brand logo variant have been identified.

1. The focus state for the links in the Neutral header is not accessible. The text is supposed to be black and not white.

2. Some items have a double line when focused and others have one. The ONS logo cannot be seen when in focus state. We do not display the submenu in the example.

Tasks

This ticket covers fixing the bugs highlighted in the ticket. Further discussions are required to discuss a full re-design of the Header component.

1. Ensure that text in focus state is black.
2. Ensure that one single line is displayed in focus state.
3. Ensure that the ONS logo can be displayed in focus state.

Acceptance Criteria

If possible, each bug is fixed and tested.

[SriHV]

Had a chat with @JNATION85. We are doubtful above the use case of Neutral header for multi-coloured brand logo and hover line when focussed(hover line turns to white instead of black, this however blends with the header with the current styling) which needs further discussion.

[SriHV]

After conversations with Dina and Joe following changes were made in this ticket:

• The background color of the neutral header is now white instead of black.
• The color of the logo links is now black.
• The focus state of the logo is consistent with the other header examples.
• The focus state of the links is now black.
• The area around the header title and navigation menu has a grey background (--ons-color-grey-75), and the text color is white.
• The focus state of the menu items is now white with an underline in black.Hover state underline is white.