Content Switcher refactor

[joshblack]

The ContentSwitcher component effectively uses the tab pattern under-the-hood in order to be operable. Unfortunately, the current API does not wire up everything that is needed for this pattern to function. In particular, it does not connect the currently selected "tab" with its corresponding "tabpanel".

This issue is to update the ContentSwitcher API to correctly implement the ARIA Design Pattern for Tab: https://w3c.github.io/aria-practices/#tabpanel behind the enable-v11-release feature flag. This work can optionally include refactoring the class-based component to a hook-based one, in an earlier stage, if it's helpful.

Some potential APIs to consider:

• Radix UI
• Reach UI

[joshblack]

API Design

// Sample code snippet

Props

Name	Type	Description

Links & Resources

• https://www.radix-ui.com/docs/primitives/components/tabs
• https://reach.tech/tabs

[joshblack]

Question, how would we relate switchers like in this example:

[joshblack]

ContentSwitcher checklist

• [x] Click should change panels
• [ ] Tab support
  • [x] Manual
  • [x] Automatic
  • [ ] Disabled ??? CAG
• [ ] Programmatic API support
  • [ ] How to do programmatic focus with programmatic API?
• [ ] Initial render use-cases (which tab is first selected)

GA

• [ ] Visual parity with existing implementation
  • [ ] Update class names?
• [ ] Dev meeting review
• [ ] Clean up / refactor code
• [ ] Prop types
• [ ] Tests
  • [ ] Jest (Component API)
  • [ ] VRT / Behavior (Cypress)
• [ ] Docs
  • [ ] Storybook MDX
  • [ ] Storybook stories
  • [ ] Default usage
  • [ ] Controlled usage
  • [ ] Activation modes
  • [ ] Playground (with controls)
• [ ] Questions addressed
  • [ ] How do we handle disabled tabs in a tab pattern, should they receive focus?
• [ ] Migration
  • [ ] How do we deprecate the existing implementation?
  • [ ] How do we move people to the new implementation?

[joshblack]

Next steps

• Take this to design, we would like to get alignment on this component
• This component seems to be used for several situations, including:
  • A toggle group to switch between display options
  • A way to filter a set of content
• Scenarios
  • Switching between palettes on the Data Viz page
  • Switching themes on the colors page
  • Icon switcher, switching visual representation of a page
• Questions
  • How is this different from a tab?
  • What use-cases does this component support?
  • When to use versus when not to use

Use cases

• Filter a set of data between several categories (all, unread, read)
• Switch between two categories that may have overlapping content (recent, recommended)
• Switching between content may be a local or a full-page navigation
• Have content be loaded synchronously or asynchronously
• Toggle the appearance of a group of content (grid, list) (icon switcher)

[kingtraceyj]

Here are some high level thoughts for our Monday discussion:

Content switcher let users toggle between different formatting, like with a grid view and a table view. They are also often used to narrow content groups of closely related information. The role of tabs in information hierarchy is to separate content. Tabs follow the metaphor for sections in a filing cabinet and two tabs wouldn’t contain the same sheet of paper. When it comes to content, tabs play a bigger part in information hierarchy while content switchers are more precise in the content/component they are paired with.

There are a few similar use cases. For instance, you could use both tabs or a content switcher within a card but it depends on the specific content being organized:

different view of same info: content switcher

different category of same thing: content switcheror tabs, depends on the visual hierarchy of the components and content around it

separate but related info: tabs (see this a lot with multiple data tables)

high level differences:

tabs	content switcher
distinct but still related content	alternate views of same content
no overlapping content (sometimes can happen but if so, it's very specific to workflow)	usually has overlapping content or is the same content
organizes a broader range content	organize specific content in context
first hierarchically, can be more broad, stand alone	usually paired with other content or components
organizes content to reduce cognitive load	narrow down choices or options to make a better decision

[kingtraceyj]

ai apps icon switcher: https://pages.github.ibm.com/ai-applications/design/components/iconcontentswitcher/usage/

[sstrubberg]

Backlog cleaning:

It currently fails the "tab pattern"