fix: auto scroll for tabs and accordion on opening

src/blocks/frontend/accordion/index.js

@@ -1,11 +1,17 @@
 /**
  * Internal dependencies
  */
-import { domReady } from '../../helpers/frontend-helper-functions.js';
+import { domReady, scrollIntoViewIfNeeded } from '../../helpers/frontend-helper-functions.js';
 
 domReady( () => {
 	const accordions = document.querySelectorAll( '.wp-block-themeisle-blocks-accordion' );
 
+	/**
+	 *	Handle the opening of the accordion items.
+	 *
+	 * @param {HTMLDetailsElement} accordion The accordion root element.
+	 * @returns
+	 */
 	const handleItemOpening = accordion => {
 		if ( ! accordion.classList.contains( 'exclusive' ) ) {
 			return;
@@ -25,6 +31,9 @@ domReady( () => {
 				openSibling.forEach( sibling => {
 					sibling.removeAttribute( 'open' );
 				});
+
+				const title = item.querySelector( ':scope > .wp-block-themeisle-blocks-accordion-item__title' );
+				scrollIntoViewIfNeeded( title );
 			});
 		});
 	};

src/blocks/frontend/tabs/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { domReady } from '../../helpers/frontend-helper-functions.js';
+import { domReady, scrollIntoViewIfNeeded } from '../../helpers/frontend-helper-functions.js';
 
 domReady( () => {
 	const tabs = document.querySelectorAll( '.wp-block-themeisle-blocks-tabs' );
@@ -57,6 +57,10 @@ domReady( () => {
 					h.classList.toggle( 'hidden', idx !== index );
 					h.setAttribute( 'aria-selected', idx === index );
 				});
+
+				if ( idx === index && headerMobile ) {
+					scrollIntoViewIfNeeded( headerMobile );
+				}
 			};
 
 			headerItem.addEventListener( 'click', () => items.forEach( toggleTabs ) );

src/blocks/helpers/frontend-helper-functions.js

@@ -185,3 +185,27 @@ export const rgb2hsl = ( color, asArray = true ) => {
 
 	return `hsl( ${h * 360}, ${s * 100}, ${l * 100} )`;
 };
+
+/**
+ *	Scrolls the element into view if it's not fully visible.
+ *
+ * @param {HTMLElement} element The element to scroll into view.
+ * @param {*} options The options for the scrollIntoView method.
+ */
+export const scrollIntoViewIfNeeded = ( element, options = {}) => {
+	if ( ! element ) {
+		return;
+	}
+
+	const rect = element.getBoundingClientRect();
+	const isFullyVisible = (
+		0 <= rect.top &&
+		0 <= rect.left &&
+		rect.bottom <= ( window.innerHeight || document.documentElement.clientHeight ) &&
+		rect.right <= ( window.innerWidth || document.documentElement.clientWidth )
+	);
+
+	if ( ! isFullyVisible ) {
+		element.scrollIntoView( options );
+	}
+};