Tabs considerations

[mbgower]

The following is an omnibus issue for the Tabs component. It is a summary of the main considerations surfaced in a review of the carbondesignsytem.com guidance. A more thorough set of comments can be viewed in the commented documents, tabs usage.pdf and tabs style.pdf.

Note that this website issue is also complemented by carbon issues to do with Tabs carbon-design-system/carbon#13029 and carbon-design-system/carbon#14373

The same two main considerations for Tabs are the same already flagged in an issue for Content Switcher

• Lack of styling guidance on tabpanel
• No mention of manual versus automatic tab selection

Additionally, there are a few style considerations:

• Especially for the line tabs variant, the primary indicator is a light grey line. IMO, this should be at least 3:1 contrast with the page background.
• there should be no focus state for the scroll chevron on the Style page. They never receive keyboard focus.
• I suggest exploring a focus indicator around the whole tablist. See my comments in the Usage.pdf for ideas

Lack of styling guidance on tabpanel

On many of the examples in the usage page, there is a clear visual tab panel designation using the white area on a grey background. It ties in the selected tab item with its panel. This is a basic feature of tab panels (especially the 'contained' version) yet there is no documentation about it on either the style or usage pages.

No description of manual versus automatic tab selection

I've added information on this into the draft Accessibility tab info. I think it is reasonable for this to be discussed on the Usage page as well.

[kingtraceyj]

Usage updates:
-Added content switcher information on when not to use a tab
-Added scroll button to anatomy section
-Added clarity around scrolling tabs and overflow content (more to come with vertical tab updates)
-Updated information about navigating away tab and returning
-Added information about automatic verses manual tabs (gif is coming! trying to troubleshoot it and it was a blocker)
-Updated icon placement to include dismissible tab variant parameters
-Added tab panel imagery

Style updates:
-Took out scroll focus states and opened
-Discussed darkening unselected line in default tabs to meet 3:1 contrast but the contrast was too similar to selected states and decided to keep as is
-Added tab panel imagery

Continued exploration:
-Investigate line extension to end of the tab panel for default tabs—this seems to be a big change for some product teams but many other systems include this in similar types of tabs
-Investigate focus state going around whole tablist #15962 (explorations started but not complete)