Tabs: Usage tab

[laurenmrice]

Ref discussion: Original issue Ref boxnote: Usage tab PDF a11y comments

Acceptance criteria

• Update the Tabs documentation on the Usage tab on the website with a11y comments and using the new content template.
• Main things to consider throughout the docs: Integrate some more guidance about the tabpanel container of the tabs.

Usage tab

Overview

• [ ] Image: make sure this is the guidance we recommend when showing two different variants of tabs on one page.

When not to use

• [ ] Add a bullet to distinguish the difference of using a tab versus a content switcher.
  • Michael's suggestion "Tabs should not be used to provide filtered versions of the same content. Use a content switcher instead."
• [ ] In the first bullet, can we link out to what the "a standard navigation pattern" is referring to?

Variants

• Michael's point he makes here is that there is also a tabpanel container associated with the variants: the line variant not having a visual color change on the tabpanel, but the contained tab variant does.
• [ ] We need to figure out how we want to show the tab panel in the docs for usage and style.

Anatomy

This image may need to be restructured / iterated on by the additions below:

• [ ] When the anatomy callout is pointing to the blue line to represent the "selected" tab, we should rename this to "Selected indicator" to be more clear.
• [ ] Consider adding a magenta border around the tab that references the anatomy callout for "Container". To be more clear its the container of the tab.
• [ ] Consider showing an anatomy callout when there are overflow tabs (the chevron button). Could be added to the contained tab variant example in 3. Consider making this whole image 12 columns.
• [ ] Consider adding an anatomy callout for the tabpanel container. (Thy has a PR up to do this with the Content Switcher Usage tab docs)

Alignment

• [ ] Mention the word "tab panel" when referencing the content underneath the tabs. The content below the tabs sits within the tab panel container.
• [ ] Information Notification: Fix the broken styling.
• [ ] Consider adding a dedicated section called "Tab panel container" to illustrate what the tab panel is and how it looks different per tab variant. And also how to use lines in line tabs on a page or in a modal to help distinguish the tab panel content from the actual tab sections and how we use them to balance out the page.

Content

• [ ] Add an "Overflow content" section to mention truncation of text and/or the chevron button for horizontal scrolling.

Behaviors

• [ ] States section: Remove the image and create a structured list to show the different states and their descriptions. We do this for most of our components now and link out to the Style tab for visuals and more in depth styles.
• [ ] States section: The last sentence in this paragraph could be reworded to "If a user navigates away from a tab, it remains the selected tab until altered by the user."

Interactions

• [ ] Keyboard: Need to mention about how to interact with the tabpanel container and the content within it. Look at Michael's specific comments in the PDF.
• [ ] Screenreader: Remove this section

Modifiers

• [ ] Tabs with icons: Mention that if using dismissable tabs, the decorative icons need to be on the left of the text in each section.
• [ ] Icon only tabs: The last sentence in this paragraph should also mention that the tooltip should also appear on focus.