From 45247802dbf6465f20ab490aca268473d6a7bf8d Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Wed, 25 Jan 2023 18:12:58 -0600
Subject: [PATCH] Add setFocusToToggleButton function to pinnableElement.js

Bug: T325020
Change-Id: I0b2f528dd71c9842ac5d04f9affdf938bcddcbb8
---
 resources/skins.vector.es6/main.js            |  1 +
 resources/skins.vector.es6/pinnableElement.js | 35 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/resources/skins.vector.es6/main.js b/resources/skins.vector.es6/main.js
index 9c87d7ecc..3cfb8100d 100644
--- a/resources/skins.vector.es6/main.js
+++ b/resources/skins.vector.es6/main.js
@@ -140,6 +140,7 @@ const updateTocLocation = () => {
 	}
 
 	pinnableElement.movePinnableElement( TOC_ID, newContainerId );
+	pinnableElement.setFocusOnToggleButton( TOC_ID );
 };
 
 /**
diff --git a/resources/skins.vector.es6/pinnableElement.js b/resources/skins.vector.es6/pinnableElement.js
index a8b786b3e..9bb7ce1ce 100644
--- a/resources/skins.vector.es6/pinnableElement.js
+++ b/resources/skins.vector.es6/pinnableElement.js
@@ -97,14 +97,45 @@ function pinnableElementClickHandler( header ) {
 	} = header.dataset;
 
 	togglePinnableClasses( header );
+	setSavedPinnableState( header );
 
 	// Optional functionality of moving the pinnable element in the DOM
 	// to different containers based on it's pinned status
 	if ( pinnableElementId && pinnedContainerId && unpinnedContainerId ) {
 		const newContainerId = isPinned( header ) ? pinnedContainerId : unpinnedContainerId;
 		movePinnableElement( pinnableElementId, newContainerId );
+		setFocusOnToggleButton( pinnableElementId );
+	}
+}
+
+/**
+ * Sets focus on the correct toggle button depending on the pinned state.
+ * Also opens the dropdown containing the unpinned element.
+ *
+ * @param {string} pinnableElementId
+ */
+function setFocusOnToggleButton( pinnableElementId ) {
+	let focusElement;
+	const pinnableElement = document.getElementById( pinnableElementId );
+	const header = /** @type {HTMLElement|null} */ ( pinnableElement && pinnableElement.querySelector( '.vector-pinnable-header' ) );
+	if ( !pinnableElement || !header ) {
+		return;
+	}
+
+	if ( isPinned( header ) ) {
+		focusElement = /** @type {HTMLElement|null} */ ( pinnableElement.querySelector( '.vector-pinnable-header-unpin-button' ) );
+	} else {
+		const dropdown = pinnableElement.closest( '.vector-menu-dropdown' );
+		const dropdownCheckbox = /** @type {HTMLInputElement|null} */ ( dropdown && dropdown.querySelector( '.vector-menu-checkbox' ) );
+		// Open dropdown containing the unpinned element
+		if ( dropdownCheckbox ) {
+			dropdownCheckbox.checked = true;
+		}
+		focusElement = /** @type {HTMLElement|null} */ ( pinnableElement.querySelector( '.vector-pinnable-header-pin-button' ) );
+	}
+	if ( focusElement ) {
+		focusElement.focus();
 	}
-	setSavedPinnableState( header );
 }
 
 /**
@@ -124,6 +155,7 @@ function bindPinnableToggleButtons( header ) {
 	toggleButtons.forEach( function ( button ) {
 		button.addEventListener( 'click', pinnableElementClickHandler.bind( null, header ) );
 	} );
+
 	// set saved pinned state for narrow breakpoint behaviour.
 	setSavedPinnableState( header );
 	// Check the breakpoint in case an override is needed on pageload.
@@ -177,6 +209,7 @@ function initPinnableElement() {
 module.exports = {
 	initPinnableElement,
 	movePinnableElement,
+	setFocusOnToggleButton,
 	isPinned,
 	PINNED_HEADER_CLASS,
 	UNPINNED_HEADER_CLASS