Update inactive tab colours to be white

[frankieroberto]

This aims to increase the contrast on the inactive tabs, and avoid them being perceived as disabled or not clickable.

This also follows the change we made to the secondary button style in #1077 which also used to be grey and was perceived to be disabled, and was changed to use an outlined style.

The inactive tabs change to use a white background, with a grey border, and the blue link colour.

The active tab change to have no underline.

The gap underneath the inactive tabs has also increased by 1 pixel.

See nhsuk/nhsuk-service-manual-community-backlog#279

Screenshots

Before

After

Checklist

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

[frankieroberto]

@anandamaryon1 @michaelgallagher @mnorri-nhsd any thoughts on this? ☝️

Possibly the inactive tabs should be nudged a couple more pixels up, now they have a border too?

Not sure how much we should lean into the 🗂️ skeuomorphic design... 😄

[colinrotherham]

Inactive tabs are more readable, but we've lost "which is the active tab?" contrast?

[frankieroberto]

Inactive tabs are more readable, but we've lost "which is the active tab?" contrast?

@colinrotherham I was thinking the 'gap' might be enough (combined with the heading below), but do you think not? Maybe if the gap was a bit bigger?

Another option might be to drop the underline on the active tab (given that clicking it doesn’t do anything).

[michaelgallagher]

i agree with @colinrotherham re: "which one is selected?"

considered outlining the inactive ones? (sorta similar to secondary buttons, but without the bottom beard etc)

[frankieroberto]

@michaelgallagher @colinrotherham Some more options:

White background, 1px bigger gap

White background, no underline on active

Transparent background, grey-4 border

Transparent background, grey-3 border

Transparent background, grey-2 border

No border, inactive items white on grey-4

---

Personally I think it’s probably more important to make the inactive tabs noticeable and look non-disabled, than it is to have contrast between the inactive and active ones - given that you also have the heading and the content to make it clear from context which one is active.

[colinrotherham]

For me it's more the squint test, blurring my vision a bit—they all look the same

I know it's a different concept entirely, but we have a lot of tab-like labelled concepts:

https://nhsuk.github.io/nhsuk-frontend/components/notification-banner/with-lots-of-content/
https://nhsuk.github.io/nhsuk-frontend/components/card/feature-with-nested-card-and-summary-list/
https://nhsuk.github.io/nhsuk-frontend/components/card/feature-with-a-to-z-content/

With these examples it's very obvious which content is active (if that's the intention)

Regarding the grey, wouldn't this introduce the same problem our new secondary button solved?

[michaelgallagher]

i agree that the main problem is knowing you can click all of the tabs, but i think "which one am i on right now?" follows hot on its heals.

is it too jumpy to make the current tab label bold? would make the first two options more obvious.

also: i like removing the underline on the active tab.

[frankieroberto]

Bold does look clearer, but has the downside of some horizontal jumping about given the bold text is slightly wider.

It’s less noticeable than I feared though (at least for tabs with short words).

[frankieroberto]

The bold also maybe starts to look quite similar to the heading (depending on your heading size):

[michaelgallagher]

personally, i don't mind the bold tab + bold card title

the tabs moving about will be a little weird though

[frankieroberto]

Another idea. Make the text colour for inactive tabs blue, to be more like links (which they kinda are):

[michaelgallagher]

@frankieroberto nifty. i like that!

[anandamaryon1]

Another idea. Make the text colour for inactive tabs blue, to be more like links (which they kinda are):

This was going to be my suggestion. Nice, I think it's an improvement.

I agree the most important concern is that people notice the other tabs and understand they can click them. Once they've done that, it's a relatively small step to notice the active tab styling.

[frankieroberto]

ok let me update this PR to make the inactive tabs have blue link text, and the active tab to be black with no-underline.

[sonarqubecloud]

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

[frankieroberto]

@anandamaryon1 @michaelgallagher I've pushed the changes to this PR and updated the description.

I think we could consider this a non-breaking change and target a v10.* release?

[anandamaryon1]

Thanks Frankie.

It's a fairly significant visual change to the component, so we should attempt to do some testing to make sure users can infact still understand and interact with the tabs.

We're going to try get v10.4.0 out this week, so I don't want to hold that up for this one, but I'm not opposed to this change being in v10.x if we can validate the change with testing.

[frankieroberto]

@anandamaryon1 sounds good. I’ll try adding this to the tabs in our service, but I’m not yet sure when we’d next get the chance to test it with users.

Worth checking in with the NHS.UK folks? I’ve not seen tabs on any pages on NHS.UK, but they might be used somewhere?