MOOSE-333: Scroll vertical tabs into view on mobile after selection

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format
 on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the
 item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
+## [2026.01]
+
+- Fixed: Vertical Tabs block now scrolls the selected tab into view on mobile, respecting reduced motion preferences. [MOOSE-333](https://moderntribe.atlassian.net/browse/MOOSE-333)
+
 ## [2025.12]
 
 - Fixed: Image Card & Image Overlay Card blocks now properly pass animation attributes to the animation helper class.

wp-content/themes/core/assets/js/utils/tabs.js

@@ -194,6 +194,17 @@ const switchTabs = ( targetTabButton ) => {
 			tabButton
 		);
 	} );
+
+	// On mobile, scroll the selected tab into view so the user doesn't have to scroll back up
+	if ( config.isMobile && config.contentMergesOnMobile ) {
+		const prefersReducedMotion = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches;
+		targetTabButton.scrollIntoView( {
+			behavior: prefersReducedMotion ? 'auto' : 'smooth',
+			block: 'start',
+		} );
+	}
 };
 
 /**

wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss

@@ -41,6 +41,11 @@
 	border-left: 3px solid var(--vertical-tabs-border-color);
 	transition: var(--transition);
 
+	/* Account for sticky header when scrolling tab into view on mobile */
+	@media (--mq-wp-small-max) {
+		scroll-margin-top: calc(var(--masthead-mobile-height) + var(--spacer-20));
+	}
+
 	&[aria-selected="true"],
   	&.editor-is-selected {
 		pointer-events: none;