You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
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)
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
Additionally, there are a few style considerations:
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.
The text was updated successfully, but these errors were encountered: