Fix safari layout shift bug (playfulprogramming#1076) (playfulprogramming#1082)

Fixes issue playfulprogramming#1076. Instead of using `target.scrollIntoView()`,
calculates the offset before running `changeTabs()` and apply that
offset to the window vertical scroll position using `window.scroll()`.
This ensures the position of the code tabs remain the same before/after
changing tabs.

Author: crutchcorn

__mocks__/setup.ts

@@ -22,28 +22,28 @@ window.history.back = () => {
 };
 
 // https://github.com/jsdom/jsdom/issues/3294
-// eslint-disable-next-line no-undef
+ 
 HTMLDialogElement.prototype.show = vi.fn(function mock(
 	this: HTMLDialogElement,
 ) {
 	this.open = true;
 });
 
-// eslint-disable-next-line no-undef
+ 
 HTMLDialogElement.prototype.showModal = vi.fn(function mock(
 	this: HTMLDialogElement,
 ) {
 	this.open = true;
 });
 
-// eslint-disable-next-line no-undef
+ 
 HTMLDialogElement.prototype.close = vi.fn(function mock(
 	this: HTMLDialogElement,
 ) {
 	this.open = false;
 });
 
-// eslint-disable-next-line no-undef
+ 
 Object.defineProperties(globalThis, {
 	// For the location mock package
 	jest: { value: vi },

src/utils/markdown/components/tabs/tabs-script.ts

@@ -20,15 +20,15 @@ export const enableTabs = () => {
 
 	// Handle arrow navigation between tabs in the tab list
 	function handleKeydown(this: HTMLElement, e: KeyboardEvent) {
-		if (e.keyCode === 39 || e.keyCode === 37) {
+		if (e.code === "ArrowRight" || e.code === "ArrowLeft") {
 			const tabs = this.children;
 			let tabfocus = Number(this.dataset.tabfocus || 0);
 			tabs[tabfocus].setAttribute("tabindex", "-1");
-			if (e.keyCode === 39) {
+			if (e.code === "ArrowRight") {
 				// Move right
 				// Increase tab index, wrap by # of tabs
 				tabfocus = (tabfocus + 1) % tabs.length;
-			} else if (e.keyCode === 37) {
+			} else if (e.code === "ArrowLeft") {
 				// Move left
 				tabfocus--;
 				// If we're at the start, move to the end
@@ -39,21 +39,32 @@ export const enableTabs = () => {
 
 			// Update tabfocus values
 			this.dataset.tabfocus = tabfocus + "";
-			// Focus + click selected tab
+			// Focus selected tab
 			const tab = tabs[tabfocus] as HTMLElement;
 			tab.setAttribute("tabindex", "0");
 			tab.focus();
-			tab.click();
 
-			// Scroll onto screen in order to avoid jumping page locations
+			// Check if tab list is within viewport
+			const header = document.querySelector("#header-bar");
+			const headerOffset = (header?.getBoundingClientRect().height ?? 0) + 20;
+			const tabYPosition = tab.getBoundingClientRect().y;
+			const tabHeight = tab.getBoundingClientRect().height;
+			const isWithinViewport =
+				tabYPosition > headerOffset &&
+				tabYPosition < window.innerHeight - tabHeight;
+
+			// Preserve scroll position if within viewport
+			// Else scroll to 20px below header
+			const offsetBeforeChangeTabs = tab.offsetTop - window.scrollY;
+			const offset = isWithinViewport ? offsetBeforeChangeTabs : headerOffset;
+
+			const tabName = tab.dataset.tabname;
+			if (!tabName) return;
+			changeTabs(tabName);
+
+			// Ensure tab list is within viewport after switching tabs
 			setTimeout(() => {
-				if (tab.scrollIntoView) {
-					tab.scrollIntoView({
-						behavior: "auto",
-						block: "center",
-						inline: "center",
-					});
-				}
+				window.scroll(0, tab.offsetTop - offset);
 			}, 0);
 		}
 	}
@@ -63,18 +74,14 @@ export const enableTabs = () => {
 		const tabName = target.dataset.tabname;
 		if (!tabName) return;
 
+		const offsetBeforeChangeTabs = target.offsetTop - window.scrollY;
+
 		changeTabs(tabName);
 
 		if (shouldScrollToTab) {
 			// Scroll onto screen in order to avoid jumping page locations
 			setTimeout(() => {
-				if (target.scrollIntoView) {
-					target.scrollIntoView({
-						behavior: "auto",
-						block: "center",
-						inline: "center",
-					});
-				}
+				window.scroll(0, target.offsetTop - offsetBeforeChangeTabs);
 			}, 0);
 		}
 	}