mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-22 17:18:32 +01:00
f7fb13a3c4
Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing `:focus` states, using a `button` element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern. Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson. Fixes #42002. Built from https://develop.svn.wordpress.org/trunk@59224 git-svn-id: http://core.svn.wordpress.org/trunk@58616 1a063a9b-81f0-0310-95a4-ce76da25c4cd
88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
/**
|
|
* Accordion-folding functionality.
|
|
*
|
|
* Markup with the appropriate classes will be automatically hidden,
|
|
* with one section opening at a time when its title is clicked.
|
|
* Use the following markup structure for accordion behavior:
|
|
*
|
|
* <div class="accordion-container">
|
|
* <div class="accordion-section open">
|
|
* <h3 class="accordion-section-title"><button type="button" aria-expanded="true" aria-controls="target-1"></button></h3>
|
|
* <div class="accordion-section-content" id="target">
|
|
* </div>
|
|
* </div>
|
|
* <div class="accordion-section">
|
|
* <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-2"></button></h3>
|
|
* <div class="accordion-section-content" id="target-2">
|
|
* </div>
|
|
* </div>
|
|
* <div class="accordion-section">
|
|
* <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-3"></button></h3>
|
|
* <div class="accordion-section-content" id="target-3">
|
|
* </div>
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* Note that any appropriate tags may be used, as long as the above classes are present.
|
|
*
|
|
* @since 3.6.0
|
|
* @output wp-admin/js/accordion.js
|
|
*/
|
|
|
|
( function( $ ){
|
|
|
|
$( function () {
|
|
|
|
// Expand/Collapse accordion sections on click.
|
|
$( '.accordion-container' ).on( 'click', '.accordion-section-title button', function() {
|
|
accordionSwitch( $( this ) );
|
|
});
|
|
|
|
});
|
|
|
|
/**
|
|
* Close the current accordion section and open a new one.
|
|
*
|
|
* @param {Object} el Title element of the accordion section to toggle.
|
|
* @since 3.6.0
|
|
*/
|
|
function accordionSwitch ( el ) {
|
|
var section = el.closest( '.accordion-section' ),
|
|
container = section.closest( '.accordion-container' ),
|
|
siblings = container.find( '.open' ),
|
|
siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
|
|
content = section.find( '.accordion-section-content' );
|
|
|
|
// This section has no content and cannot be expanded.
|
|
if ( section.hasClass( 'cannot-expand' ) ) {
|
|
return;
|
|
}
|
|
|
|
// Add a class to the container to let us know something is happening inside.
|
|
// This helps in cases such as hiding a scrollbar while animations are executing.
|
|
container.addClass( 'opening' );
|
|
|
|
if ( section.hasClass( 'open' ) ) {
|
|
section.toggleClass( 'open' );
|
|
content.toggle( true ).slideToggle( 150 );
|
|
} else {
|
|
siblingsToggleControl.attr( 'aria-expanded', 'false' );
|
|
siblings.removeClass( 'open' );
|
|
siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
|
|
content.toggle( false ).slideToggle( 150 );
|
|
section.toggleClass( 'open' );
|
|
}
|
|
|
|
// We have to wait for the animations to finish.
|
|
setTimeout(function(){
|
|
container.removeClass( 'opening' );
|
|
}, 150);
|
|
|
|
// If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
|
|
if ( el ) {
|
|
el.attr( 'aria-expanded', String( el.attr( 'aria-expanded' ) === 'false' ) );
|
|
}
|
|
}
|
|
|
|
})(jQuery);
|