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
This commit is contained in:
bwang
2021-12-17 11:51:25 -06:00
committed by jenkins-bot
parent 79eb26fafd
commit c95e8e70c5

View File

@@ -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();
}
}