Scrollable tabs

[munteannatan]

😯 Problem to Solve

When the tabs displayed have longer names or there are too many of them, they overflow the page.
This can hide valuable information from the user and hinder navigation.

💁 Proposed Solution

The tabs should be customizable so that they may be confined to the existing container width and the tab titles could be truncated.

The easiest way this can be achieved is by providing a part name to the Tab component default slot so that it can be customized.

<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
  ${startSlotTemplate(options)}
  <slot part="content"></slot>
  ${endSlotTemplate(options)}
</template>

📋 Tasks

• Scrollable tabs visual design request #2337

[m-akinc]

Dynamic form fields are another case where long, user-provided labels may have the same issue.

[jattasNI]

The team that originally submitted this request mentioned that they plan to use a workaround of manually setting the tab titles to include ellipses and to add a tooltip with the full text.

[fredvisser]

🧑‍🔬 Research

Scrollable:

• https://opensource.adobe.com/spectrum-web-components/components/tabs-overflow/
• https://js.devexpress.com/Angular/Demos/WidgetsGallery/Demo/Tabs/Overview/MaterialBlueLight/
• https://base.uber.com/6d2425e9f/p/2345e5-tabs
• https://polaris.shopify.com/components/navigation/tabs?example=tabs-default
• https://carbondesignsystem.com/components/tabs/style/
• https://shoelace.style/components/tab-group
• https://workbench.gusto.com/components/tabs/usage/#reach-skip-nav
• https://vivid.deno.dev/components/tabs/
• https://mesadesignsystem.lanl.gov/components/tabs/overview

Overflow menu:

• https://fluent2.microsoft.design/components/web/react/tablist/usage
• https://www.lightningdesignsystem.com/components/tabs/#With-Overflow
• https://style.monday.com/?path=/docs/navigation-tabs-tabs--docs
• https://clarity.design/documentation/tabs/code

Squish/wrap:

• https://dash.plotly.com/dash-core-components/tabs
• https://design-system.service.gov.uk/components/tabs/

[fredvisser]

I'd like to propose that we prioritize a scrollable implementation like Shoelace.

Any challenges to this approach?

[jattasNI]

Notes from team review of the visual design:

1. there shouldn't be a visible scrollbar on any OS
2. when a tab has keyboard focus, left/right arrow keys should continue to move to the next tab as they do today. That tab should scroll into view if it was off screen.
3. don't need to worry about keeping the current tab within view
4. TBD whether the scroll buttons are tab-focusable
5. start by matching shoelace's behavior when an arrow button is clicked: scrolling one "page width" (i.e. all the currently visible tabs scroll out of view). We can start there, play with it and see how it feels.
6. we should have usage guidance that tabs shouldn't be given very long names. In case that's out of an app's control (e.g. user-specified names) we could consider following our established pattern of having a reasonable default max-width on each tab but allowing apps to override it. This will probably require other styling changes to behave well.