For discussion: Allow tabs to work on mobile

[frankieroberto]

Currently the way our Tabs component is set up mirrors the way the GOV.UK Tabs work.

That is, if JavaScript is unavailable OR you’re on a viewport below 641 pixels wide (mostly a mobile, or split-screen on a tablet or laptop), then you don’t see the visual tabs at all but instead see a "Contents" list of links, which are then anchor-linked to plain headings further down the page.

This is great from a progressive enhancement point of view for the no-JavaScript option, but can be unexpected on a mobile, where users might lose the ability to quick switch between tabs, and also face quite a long page.

One additional consideration is that in the GOVUK design system, both the tab panel background and the general page background is white. However in the NHS design system, the general page background is light grey but the tab panel background is white - so this means remembering to design the tab content to work on both background colours.

We could instead change the component so that the tab behaviour is also available on mobile sized screens. This would be particularly advantageous where the tabs are short enough to fit.

Screenshots

Before	After

What if they don’t fit?

The tricky bit is deciding what to do if the tabs don’t fit in a single row on your mobile-sized screen, either because you’ve got too many of them or the labels are too long.

Without any further modification, this looks broken:

Possible solutions:

• accept that they’ll flow across multiple row, but tweak the design so that they all start at the left and look better
• as above, but also use JavaScript to dynamically switch the rows around so that the row with the active tab is always at the bottom (might be hard?)
• use JavaScript so that any tabs that don't fit get collapsed into a 'More' item, in the same way as the navigation in the main Header component
• allow horizontal scrolling, possibly with a fade to indicate that there is more to see (sounds crazy, but this is what the Guardian does)
• something else?

[frankieroberto]

Follow-up thought: could the tab behaviour work with pure CSS nowadays? (eg using the :target selector)

[michaelgallagher]

some random lunchtime thoughts:

• if the purpose of the tabs is to restrict the content that is shown on screen at any given moment and segment it up into digestible chunks, i'm definitely in favour of exploring this idea
• a side-scrolling thing could work (BBC apps do this, but: they're apps). i'd be interested in seeing how this performs in research
• "more" might work in some situations, where you can rank the priority of the tabs, but what if you can't? past experience suggests people don't look in their all the time, plus somehow it feels wrong if the tabs represent timeframes (as per the example) because it suggests a hierarchy of importance (e.g. "Last year" is less important because it is hidden?)
• i'm fairly skeptical of multiple stacked rows of buttons because it might grow to take up a fairly large amount of the screen, which would make the way the screen is changing when you click a new tab harder to spot (i realise this is a pretty extreme situation)

[anandamaryon1]

We could make it optional and more of an editorial decision, like with responsive tables.

The designer can decide to allow it to be tabbed or stacked on mobile, depending on the content and labels. I suppose even with this, we'll need to make it not totally broken on mobile though…