From b9a602ba429ae2871c0eb3623ea6aff1133ea68d Mon Sep 17 00:00:00 2001 From: Jason Zinn Date: Mon, 19 Jan 2026 16:17:00 -0600 Subject: [PATCH 1/3] MOOSE-333: Scroll vertical tabs into view on mobile after selection When a vertical tab is clicked on mobile, the viewport now scrolls to show the selected tab at the top. Added scroll-margin-top to account for the sticky header. --- wp-content/themes/core/assets/js/utils/tabs.js | 8 ++++++++ .../themes/core/blocks/tribe/vertical-tabs/style.pcss | 5 +++++ 2 files changed, 13 insertions(+) diff --git a/wp-content/themes/core/assets/js/utils/tabs.js b/wp-content/themes/core/assets/js/utils/tabs.js index a130f9b9..c9ee9f6b 100644 --- a/wp-content/themes/core/assets/js/utils/tabs.js +++ b/wp-content/themes/core/assets/js/utils/tabs.js @@ -194,6 +194,14 @@ 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 ) { + targetTabButton.scrollIntoView( { + behavior: 'smooth', + block: 'start', + } ); + } }; /** diff --git a/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss b/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss index 45105d42..3ee74edf 100644 --- a/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss +++ b/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; From f60906644154d1eed3484fc4cd5a6d27de324f0f Mon Sep 17 00:00:00 2001 From: Jason Zinn Date: Wed, 21 Jan 2026 10:42:15 -0600 Subject: [PATCH 2/3] updated scroll to check for prefers reduced motion --- wp-content/themes/core/assets/js/utils/tabs.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/wp-content/themes/core/assets/js/utils/tabs.js b/wp-content/themes/core/assets/js/utils/tabs.js index c9ee9f6b..60a178c4 100644 --- a/wp-content/themes/core/assets/js/utils/tabs.js +++ b/wp-content/themes/core/assets/js/utils/tabs.js @@ -197,8 +197,11 @@ const switchTabs = ( targetTabButton ) => { // 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: 'smooth', + behavior: prefersReducedMotion ? 'auto' : 'smooth', block: 'start', } ); } From 624abe4acbdbd724d358d3233858ff8725aebbd8 Mon Sep 17 00:00:00 2001 From: Jason Zinn Date: Wed, 21 Jan 2026 10:44:23 -0600 Subject: [PATCH 3/3] updated changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce3200d5..ac96839d 100644 --- a/CHANGELOG.md +++ b/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.