What?

The new V2 of TabPanel will be a more modular/composable approach to the component, utilizing Ariakit internals. Some of the initial work here has already begun in #52133. That PR focuses on updated the existing component to use Ariakit, while maintaining the same functionality and API surface.

The new component will most likely be named Tabs, as that's a bit more descriptive of the component's function and it will help avoid confusion with the tabpanel role that gets assigned to specific elements within the component.

Requirements of the new component

Some specific features/capabilities this new component must have. A few of these are current blockers of a faux tab replacement

• Controlled Mode. Specifically, this will allow consumers to set the selected tab when necessary.
• The ability to place the tablist and tabpanel subcomponents in arbitrary locations within the DOM.
• tablist design flexibilty
  • Placing an auxiliary button (or other element?) such as a "Close" button beside the tablist
  • Optional full-width tabs
• Limit onSelect calls to intentional user selections. Currently, the consumer-provided onSelect callback is triggered when the initial tab is selected during the first render. In V2, we intend to only trigger this callback when the user actively selects a tab, not when the component does so automatically.

Nice-to-haves of the new component

tabpanel tab stop/focus behavior

There are no tab stops on the individual tabpanel elements of the current TabPanel component. (...this is when I start looking forward to renaming this component to Tabs in the future 😉). This is something we're changing in the previously mentioned Ariakit migration to better align with ARIA guidance:

When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.

When that PR merges, all of the tabpanels will get a tab stop, but there's a second part of this guidance for cases dealing with focusable and meaningful content within the tabpanel.

For obvious reasons, our component won't be in a good position to determine which focusable elements contain "meaningful content". We would, however, like to expose a prop (or props, depending on the final approach to this) allowing consumers to specify whether or not focus should go to the tabpanel itself, or to the first focusable element. In cases where the author of a particular implementation knows that the first element in the tabpanel is both focusable and meaningful, this prop will give them the flexibility necessary to streamline the tab flow for end users.

TODOs/Migrations

• Review and possibly update how IDs are handled Tabs: replace id with new tabId prop #56883
• Migrate faux-tabs pattern in Post/Page Editor Settings Sidebar Implement Tabs in editor settings #55360
• Migrate TabPanel in the ColorGradientControl Components: replace TabPanel with Tabs in the editor's ColorGradientControl #56351
• Migrate TabPanel in ColorPanel Components: replace TabPanel with Tabs in the editor's ColorPanel #56878
• Migrate TabPanel in InserterTabs Components: replace TabPanel with Tabs in the Block Inserter #56918
• Migrate TabPanel in InspectorControlsTabs Components: replace TabPanel with Tabs in the Block Inspector #56995
• Migrate TabPanel in ListViewSidebar Components: replace TabPanel with Tabs in the editor Document Overview sidebar #57082
  • Make sure that all style overrides related to the edit-post-sidebar__panel-tab and edit-post-sidebar__panel-tabs classnames are cleaned up, and e2e tests are updated
• Migrate TabPanel in ScreenColorPalette Components: replace TabPanel with Tabs in the editor Global Styles color palette #57126
• Migrate TabPanel in FontLibraryModal Components: replace TabPanel with Tabs in the Font Library Modal #57181
• Migrate TabPanel in StyleBook Components: replace TabPanel with Tabs in the Style Book #57287
• Migrate TabPanel in InlineColorUI Components: replace TabPanel with Tabs in inline color picker #57292
• Migrate TabPanel in PreferencesModalTabs Components: replace TabPanel with Tabs in the Editor Preferences Modal #57293
• Migrate faux-tabs pattern in Site Editor Settings Sidebar (note: this looks very similar to the post/page editor sidebar at the top of this list) Implement Tabs in site-editor settings #56959
• Make Tabs have a fluid height #62027
• Tabs: add vertical indicator animation #62879
• Tabs: split animation logic into multiple separate composable utilities. #62942
• Tabs: move animation-related utilities into separate utils file. #62946
• Tabs: "With Tab Icons" story has duplicated focus styles #63271
• Tabs: Fix text-align when text wraps in vertical mode #63272
• Tabs: Prevent accidental overflow in indicator #61979
• Make Tabs have a fluid height #62027
• Tabs: hyphenate tab labels #63337
• Tabs: Vertical Tabs should be 40px min height #63446
• Tabs: keep full opacity of focus ring on disabled tabs #63754
• Tabs: add "with links" Storybook example #67699
• API naming:
  • onSelect is not consistent with selectedTabId ?
  • tabId on Tabs.Tab could be changed to id ?
• Tabs: design / UX audit ahead of stabilization #68149
• Once all known implementations are addressed, double check that nothing new has been introduced in the meantime
• Check all implementations and remove as many style overrides as possible
• Agree on a naming convention (see @wordpress/components: agree on a naming convention for compound (sub) components #63242)
• Promote to stable, add deprecation warning to TabPanel
• Double-check docs
• Make sure relevant devnote(s) are written and ready

There may be migrations necessary, if there are implementations that are simulating a tabs pattern without actually using TabPanel. I've included the two of these that I know of, but if anyone is familiar with or comes across more, please let me know!

Related:

• Tabs with longer strings may trigger horizontal scrolling of the panels they live in #62020
• Remove extraneous elements placed between Tabs and Tab panels #59013