Tabs: design / UX audit ahead of stabilization

[ciampo]

As we'd like to stabilize the Tabs component soon (#52997), we'd like to get the green light from @WordPress/gutenberg-design in terms of the component's design and UX.

Most importantly, let's try to in terms of future compatibility — are there any aspects of the component as of today that would need changing in the future, and would that change be a breaking change? If so, let's address it before stabilizing. (for example, are we good with how the component currently handles overflowing tabs by showing a horizontal scrollbar?)

cc @WordPress/gutenberg-components

[jameskoster]

It's not perfect, but I think horizontal scrolling is acceptable, and preferable to other techniques like wrapping the tabs. It's also fairly standard practise across design systems. It may be that we add left/right buttons to assist when scrolling is uncomfortable (see example), but that needs investigation.

We may also need to make a change to the styling of active tabs in vertical orientation. In the recent update there was consensus that showing the chevron on hover/focused/selected tabs was an adequate 'shape change' in terms of indicating the different states. But in #55730 an argument is made that the chevron should be present on the resting state too because as it indicates the behavior of opening a 'subpanel'. If that's the case we'll need a different shape change (or some other treatment that satisfies contrast requirements) for the selected tab. This all relates a bit to #66448, and is probably better discussed there :)

I don't consider either of these to be breaking changes.

[ciampo]

I agree. I also think that neither of those changes would be considered as breaking changes.