feat(core): ✨ use MW core checkboxHack instead

We no longer need to emulate the same feature when it is in core

resources/skins.citizen.scripts/checkbox.js

@@ -0,0 +1,100 @@
+/**
+ * Extend core checkboxHacks
+ *
+ * @see https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.js/checkbox.js
+ */
+
+const
+	checkboxHack = require( 'mediawiki.page.ready' ).checkboxHack,
+	CHECKBOX_HACK_CONTAINER_SELECTOR = '.mw-checkbox-hack-container',
+	CHECKBOX_HACK_CHECKBOX_SELECTOR = '.mw-checkbox-hack-checkbox',
+	CHECKBOX_HACK_BUTTON_SELECTOR = '.mw-checkbox-hack-button',
+	CHECKBOX_HACK_TARGET_SELECTOR = '.mw-checkbox-hack-target';
+
+/**
+ * Set the checked state and fire the 'input' event.
+ * Copied from core as it is not accessible outside
+ *
+ * @param {HTMLInputElement} checkbox
+ * @param {boolean} checked
+ * @return {void}
+ * @ignore
+ */
+function setCheckedState( checkbox, checked ) {
+	/** @type {Event} @ignore */
+	checkbox.checked = checked;
+	// Chrome and Firefox sends the builtin Event with .bubbles == true and .composed == true.
+	let e;
+	if ( typeof Event === 'function' ) {
+		e = new Event( 'input', { bubbles: true, composed: true } );
+	}
+	checkbox.dispatchEvent( e );
+}
+
+/**
+ * Dismiss the target when ESCAPE is pressed.
+ *
+ * @param {Window} window
+ * @param {HTMLInputElement} checkbox
+ * @return {function(): void} Cleanup function that removes the added event listeners.
+ * @ignore
+ */
+function bindDismissOnEscape( window, checkbox ) {
+	const onKeyup = ( /** @type {KeyboardEvent} */ event ) => {
+		// Only handle ESCAPE
+		if ( event.key !== 'Escape' ) {
+			return;
+		}
+		setCheckedState( checkbox, false );
+	};
+
+	window.addEventListener( 'keyup', onKeyup, true );
+	return function () {
+		window.removeEventListener( 'keyup', onKeyup );
+	};
+}
+
+/**
+ * Close all menus through unchecking all checkbox hacks
+ *
+ * @return {void}
+ */
+function uncheckCheckboxHacks() {
+	const checkboxes = document.querySelectorAll( CHECKBOX_HACK_CHECKBOX_SELECTOR + ':checked' );
+
+	checkboxes.forEach( ( checkbox ) => {
+		setCheckedState( checkbox, false );
+	} );
+}
+
+/**
+ * Enhance dropdownMenu functionality and accessibility using core's checkboxHack.
+ * Based on Vector
+ *
+ * @return {void}
+ */
+function bind() {
+	// Search for all dropdown containers using the CHECKBOX_HACK_CONTAINER_SELECTOR.
+	const containers = document.querySelectorAll( CHECKBOX_HACK_CONTAINER_SELECTOR );
+
+	containers.forEach( ( container ) => {
+		const
+			checkbox = container.querySelector( CHECKBOX_HACK_CHECKBOX_SELECTOR ),
+			button = container.querySelector( CHECKBOX_HACK_BUTTON_SELECTOR ),
+			target = container.querySelector( CHECKBOX_HACK_TARGET_SELECTOR );
+
+		if ( !( checkbox && button && target ) ) {
+			return;
+		}
+
+		// Core CheckboxHack
+		checkboxHack.bind( window, checkbox, button, target );
+		// Citizen CheckboxHack
+		bindDismissOnEscape( window, checkbox );
+	} );
+}
+
+module.exports = {
+	bind: bind,
+	uncheckCheckboxHacks: uncheckCheckboxHacks
+};