From c95e8e70c57a3d815be7cbc9c6975e69a39adeba Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Fri, 17 Dec 2021 11:51:25 -0600
Subject: [PATCH] Handle "Enter" keyboard event for checkbox hack selectors

"Enter" key support for Vector ULS button was previously handled by the core checkbox hack. With the upcoming changes to the checkbox hack implementation, it needs to be handled separately.
Context: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/747877/10/resources/src/mediawiki.page.ready/checkboxHack.js#b275

Change-Id: Id74a80cda6cf460cc2b579269b8d5b2ce81c8ca5
---
 resources/js/ext.uls.interface.js | 44 ++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js
index 5474294b..00e1a212 100644
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -429,6 +429,27 @@
 		} );
 	}
 
+	/**
+	 * Special handling for checkbox hack.
+	 * Disable default checkbox behavior and bind click to "Enter" keyboard events
+	 */
+	function handleCheckboxSelector() {
+		// If the ULS button is also a checkbox, we can
+		// conclude that it's using the checkbox hack.
+		$( document ).on( 'input', 'input.mw-interlanguage-selector[type="checkbox"]', function ( ev ) {
+			var elem = ev.currentTarget;
+			elem.checked = false;
+		} );
+
+		$( document ).on( 'keydown', 'input.mw-interlanguage-selector[type="checkbox"]', function ( ev ) {
+			var elem = ev.currentTarget;
+			if ( ev.key !== 'Enter' ) {
+				return;
+			}
+			elem.click();
+		} );
+	}
+
 	/**
 	 * Load and open ULS for content language selection.
 	 *
@@ -438,29 +459,15 @@
 	 * @param {jQuery.Event} ev
 	 */
 	function loadContentLanguageSelector( ev ) {
-		var targetNode = ev.currentTarget,
-			$target = $( targetNode );
-		ev.preventDefault();
-		// Special handling for checkboxes
-		if (
-			targetNode &&
-			targetNode.tagName === 'INPUT' &&
-			targetNode.getAttribute( 'type' ) === 'checkbox'
-		) {
-			// Disabled checked status. If the ULS button is also a checkbox, we can
-			// conclude that it's using the checkbox hack.
-			// Setting checked to false disables the default behavior of that checkbox.
-			targetNode.checked = false;
-			$target.on( 'click', function () {
-				targetNode.checked = false;
-			} );
-		}
+		var $target = $( ev.currentTarget );
 
 		// Avoid reinitializing ULS multiple times for an element
 		if ( $target.attr( 'data-uls-loaded' ) ) {
 			return;
 		}
 
+		ev.preventDefault();
+
 		mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
 			var parent, languageNodes, standalone, uls;
 
@@ -505,7 +512,8 @@
 			// module may run simultaneously. Using event delegation to avoid race conditions where
 			// the trigger may be created after this code.
 			$( document ).on( 'click', '.mw-interlanguage-selector', loadContentLanguageSelector );
-
+			// Special handling for checkbox hack.
+			handleCheckboxSelector();
 		}
 	}