Attempts to add interactivity API to show tab on click

packages/block-library/src/tab/save.js

@@ -18,6 +18,7 @@ export default function save( { attributes } ) {
 		<div
 			{ ...innerBlocksProps }
 			aria-labelledby={ tabLabelId }
+			data-wp-class--is-active={ `${ tabIndex } === context.activeTab` }
 			id={ tabPanelId }
 			role="tabpanel"
 		/>

packages/block-library/src/tabs/block.json

@@ -41,5 +41,6 @@
 		}
 	},
 	"editorStyle": "wp-block-tabs-editor",
-	"style": "wp-block-tabs"
+	"style": "wp-block-tabs",
+	"viewScriptModule": "file:./view.min.js"
 }

packages/block-library/src/tabs/save.js

@@ -20,7 +20,11 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div { ...blockProps }>
+		<div
+			{ ...blockProps }
+			data-wp-interactive="core/tabs"
+			data-wp-context='{ "activeTab": 0 }'
+		>
 			<ul className="wp-block-tabs__list" role="tablist">
 				{ innerTabs.map( ( tab, index ) => {
 					const isActive = index === 0;
@@ -34,7 +38,9 @@ export default function save( { attributes } ) {
 						>
 							<RichText.Content
 								aria-controls={ tab.id }
-								aria-selected={ isActive }
+								data-wp-bind--aria-selected={ `${ index } === context.activeTab` }
+								data-wp-class--is-active={ `${ index } === context.activeTab` }
+								data-wp-on--click={ `actions.setActiveTab.bind( null, ${ index } )` }
 								className={ clsx( 'wp-block-tabs__tab-label', {
 									'is-active': isActive,
 								} ) }

packages/block-library/src/tabs/view.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'core/tabs', {
+	actions: {
+		setActiveTab: ( index ) => {
+			const context = getContext();
+			context.activeTab = index;
+		},
+	},
+} );