wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 09:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make dropdown menus toggle with enter key

Browse source 
Bug: T291096
Change-Id: Ia5d1a33aa04dab09f1454ade4816fdb9d48f1eca
This commit is contained in:
Nicholas Ray 2021-10-21 09:59:58 -06:00
parent ae28c427d6
commit 876d3ddf39
3 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/Menu.mustache
View file

@ -2,7 +2,7 @@
See @typedef MenuDefinition See @typedef MenuDefinition
}} }}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }} {{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} <nav id="{{id}}" class="{{#class}}{{.}} {{/class}}{{#is-dropdown}}vector-menu-dropdown{{/is-dropdown}}" aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}
{{{html-user-language-attributes}}}> {{{html-user-language-attributes}}}>
{{#is-dropdown}} {{#is-dropdown}}
<input type="checkbox" <input type="checkbox"

32
resources/skins.vector.js/dropdownMenus.js
View file

@ -1,3 +1,34 @@
/** @interface CheckboxHack */
var
checkboxHack = /** @type {CheckboxHack} */ require( /** @type {string} */( 'mediawiki.page.ready' ) ).checkboxHack,
CHECKBOX_HACK_CONTAINER_SELECTOR = '.vector-menu-dropdown',
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.vector-menu-checkbox',
CHECKBOX_HACK_BUTTON_SELECTOR = '.vector-menu-checkbox',
CHECKBOX_HACK_TARGET_SELECTOR = '.vector-menu-content';
/**
* Add the ability for users to toggle dropdown menus using the enter key (as
* well as space) using core's checkboxHack.
*/
function bindToggleOnSpaceEnter() {
// Search for all dropdown containers using the CHECKBOX_HACK_CONTAINER_SELECTOR.
var containers = document.querySelectorAll( CHECKBOX_HACK_CONTAINER_SELECTOR );
Array.prototype.forEach.call( containers, function ( container ) {
var
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;
}
checkboxHack.bindToggleOnSpaceEnter( checkbox, button );
} );
}
/** /**
* Make sure that clicking outside a menu closes it. * Make sure that clicking outside a menu closes it.
*/ */
@ -63,4 +94,5 @@ mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
module.exports = function dropdownMenus() { module.exports = function dropdownMenus() {
closeDropdownsOnClickOutside(); closeDropdownsOnClickOutside();
bindToggleOnSpaceEnter();
}; };

5
resources/skins.vector.js/skin.js
View file

@ -47,7 +47,6 @@ function main( window ) {
enableCssAnimations( window.document ); enableCssAnimations( window.document );
collapsibleTabs.init(); collapsibleTabs.init();
sidebar.init( window ); sidebar.init( window );
dropdownMenus();
vector.init(); vector.init();
initSearchLoader( document ); initSearchLoader( document );
// Initialize the search toggle for the main header only. The sticky header // Initialize the search toggle for the main header only. The sticky header
@ -55,6 +54,10 @@ function main( window ) {
searchToggle( document.querySelector( '.mw-header .search-toggle' ) ); searchToggle( document.querySelector( '.mw-header .search-toggle' ) );
languageButton(); languageButton();
stickyHeader(); stickyHeader();
// dropdownMenus should be placed afer sticky header is initialized in order to
// bind the correct event handlers to the sticky header dropdown menus (e.g.
// user menu).
dropdownMenus();
} }
/** /**