wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 15:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Add setFocusToToggleButton function to pinnableElement.js"

Browse source
This commit is contained in:
jenkins-bot 2023-02-02 15:23:19 +00:00 committed by Gerrit Code Review
parent 7901984d4d f3ddc51534
commit 61901f8b2d
4 changed files with 64 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/skins.vector.es6/main.js
View file

@ -278,7 +278,10 @@ const main = () => {
onToggleClick: ( id ) => {
tableOfContents.toggleExpandSection( id );
},
onTogglePinned: updateTocLocation
onTogglePinned: () => {
updateTocLocation();
pinnableElement.setFocusAfterToggle( TOC_ID );
}
} );
const headingSelector = [
'h1', 'h2', 'h3', 'h4', 'h5', 'h6'

28
resources/skins.vector.es6/pinnableElement.js
View file

@ -97,14 +97,39 @@ 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 );
setFocusAfterToggle( 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 setFocusAfterToggle( 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-dropdown' );
focusElement = /** @type {HTMLInputElement|null} */ ( dropdown && dropdown.querySelector( '.vector-menu-checkbox' ) );
}
if ( focusElement ) {
focusElement.focus();
}
setSavedPinnableState( header );
}
/**
@ -177,6 +202,7 @@ function initPinnableElement() {
module.exports = {
initPinnableElement,
movePinnableElement,
setFocusAfterToggle,
isPinned,
PINNED_HEADER_CLASS,
UNPINNED_HEADER_CLASS

12
tests/jest/__snapshots__/pinnableElement.test.js.snap
View file

@ -5,13 +5,21 @@ exports[`Pinnable header renders 1`] = `
<div id=\\"pinned-container\\">
</div>
<div id=\\"unpinned-container\\">
<div id=\\"pinnable-element\\"> <div class=\\"vector-pinnable-header simple-pinnable-header vector-pinnable-header-unpinned\\" data-name=\\"simple\\" data-pinnable-element-id=\\"pinnable-element\\">
<div class=\\"vector-dropdown\\">
<input type=\\"checkbox\\" id=\\"checkbox\\" class=\\"vector-menu-checkbox\\">
<label for=\\"checkbox\\" class=\\"vector-menu-heading \\">
<span class=\\"vector-menu-heading-label\\">Dropdown</span>
</label>
<div class=\\"vector-menu-content\\">
<div id=\\"unpinned-container\\">
<div id=\\"pinnable-element\\"> <div class=\\"vector-pinnable-header simple-pinnable-header vector-pinnable-header-unpinned\\" data-name=\\"simple\\" data-pinnable-element-id=\\"pinnable-element\\">
<div class=\\"vector-pinnable-header-label\\">simple pinnable element</div>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.simple.pin\\">pin</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.simple.unpin\\">unpin</button>
</div>
</div>
</div>
</div>
</div>
"
`;

25
tests/jest/pinnableElement.test.js
View file

@ -54,8 +54,16 @@ const initializeHTML = ( headerData ) => {
<div id="pinned-container">
${ headerData[ 'is-pinned' ] ? pinnableElementHTML : '' }
</div>
<div id="unpinned-container">
${ !headerData[ 'is-pinned' ] ? pinnableElementHTML : '' }
<div class="vector-dropdown">
<input type="checkbox" id="checkbox" class="vector-menu-checkbox">
<label for="checkbox" class="vector-menu-heading ">
<span class="vector-menu-heading-label">Dropdown</span>
</label>
<div class="vector-menu-content">
<div id="unpinned-container">
${ !headerData[ 'is-pinned' ] ? pinnableElementHTML : '' }
</div>
</div>
</div>
`;
@ -173,4 +181,17 @@ describe( 'Pinnable header', () => {
expect( pinnableElement.isPinned( header ) ).toBe( false );
} );
test( 'setFocusAfterToggle() sets focus on appropriate element after pinnableElement is toggled', () => {
initializeHTML( movableData );
pinnableElement.initPinnableElement();
const dropdownCheckbox = /** @type {HTMLElement} */ ( document.getElementById( 'checkbox' ) );
const pinButton = /** @type {HTMLElement} */ ( document.querySelector( '.vector-pinnable-header-pin-button' ) );
const unpinButton = /** @type {HTMLElement} */ ( document.querySelector( '.vector-pinnable-header-unpin-button' ) );
pinButton.click();
expect( document.activeElement ).toBe( unpinButton );
unpinButton.click();
expect( document.activeElement ).toBe( dropdownCheckbox );
} );
} );