Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-25 06:14:58 +02:00
Code Issues Projects Releases Wiki Activity

Customizer panels:

Browse Source 
* Close all accordion sections when going in and out of panels.
* Fix panel positioning when top-level Customizer controls are scrolled down.
* Keyboard accessibility: only focus on visible elements and transfer between them as needed when navigating around panels.

props celloexpressions. see #27406.

Built from https://develop.svn.wordpress.org/trunk@29035


git-svn-id: http://core.svn.wordpress.org/trunk@28823 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-07-08 20:19:15 +00:00
parent c2a3f4fab5
commit 3575612966
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
wp-admin/js/accordion.js
View File

@ -69,26 +69,41 @@
}
function panelSwitch( panel ) {
var position,
var position, scroll,
section = panel.closest( '.accordion-section' ),
container = section.closest( '.wp-full-overlay' ),
siblings = container.find( '.accordion-section.open' ),
overlay = section.closest( '.wp-full-overlay' ),
container = section.closest( '.accordion-container' ),
siblings = container.find( '.open' ),
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
backBtn = section.find( '.control-panel-back' ),
panelTitle = section.find( '.accordion-section-title' ).first(),
content = section.find( '.control-panel-content' );
if ( section.hasClass( 'current-panel' ) ) {
section.toggleClass( 'current-panel' );
container.toggleClass( 'in-sub-panel' );
overlay.toggleClass( 'in-sub-panel' );
content.delay( 180 ).hide( 0, function() {
content.css( 'margin-top', 'inherit' ); // Reset
} );
topPanel.attr( 'tabindex', '0' );
backBtn.attr( 'tabindex', '-1' );
panelTitle.focus();
container.scrollTop( 0 );
} else {
// Close all open sections in any accordion level.
siblings.removeClass( 'open' );
siblings.find( sectionContent ).show().slideUp( 0 );
content.show( 0, function() {
position = content.offset().top;
content.css( 'margin-top', ( 45 - position ) );
scroll = container.scrollTop();
content.css( 'margin-top', ( 45 - position - scroll ) );
section.toggleClass( 'current-panel' );
container.toggleClass( 'in-sub-panel' );
overlay.toggleClass( 'in-sub-panel' );
container.scrollTop( 0 );
} );
topPanel.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.focus();
}
}

2
wp-admin/js/accordion.min.js vendored
View File

@ -1 +1 @@
!function(a){function b(){e.removeClass("top bottom"),e.filter(":visible").first().addClass("top"),e.filter(":visible").last().addClass("bottom").find(f).addClass("bottom")}function c(a){var c=a.closest(".accordion-section"),e=c.closest(".accordion-container").find(".open"),g=c.find(f);if(!c.hasClass("cannot-expand")){if(c.hasClass("control-panel"))return void d(c);c.hasClass("open")?(c.toggleClass("open"),g.toggle(!0).slideToggle(150)):(e.removeClass("open"),e.find(f).show().slideUp(150),g.toggle(!1).slideToggle(150),c.toggleClass("open")),b()}}function d(a){var b,c=a.closest(".accordion-section"),d=c.closest(".wp-full-overlay"),e=d.find(".accordion-section.open"),f=c.find(".control-panel-content");c.hasClass("current-panel")?(c.toggleClass("current-panel"),d.toggleClass("in-sub-panel"),f.delay(180).hide(0,function(){f.css("margin-top","inherit")})):(e.removeClass("open"),f.show(0,function(){b=f.offset().top,f.css("margin-top",45-b),c.toggleClass("current-panel"),d.toggleClass("in-sub-panel")}))}a(document).ready(function(){a(".accordion-container").on("click keydown",".accordion-section-title",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),c(a(this)))}),a(".accordion-container").on("click keydown",".control-panel-back",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),d(a(this)))}),a(".hide-postbox-tog").click(function(){b()})});var e=a(".accordion-container li.accordion-section"),f=a(".accordion-section-content");b()}(jQuery);
!function(a){function b(){e.removeClass("top bottom"),e.filter(":visible").first().addClass("top"),e.filter(":visible").last().addClass("bottom").find(f).addClass("bottom")}function c(a){var c=a.closest(".accordion-section"),e=c.closest(".accordion-container").find(".open"),g=c.find(f);if(!c.hasClass("cannot-expand")){if(c.hasClass("control-panel"))return void d(c);c.hasClass("open")?(c.toggleClass("open"),g.toggle(!0).slideToggle(150)):(e.removeClass("open"),e.find(f).show().slideUp(150),g.toggle(!1).slideToggle(150),c.toggleClass("open")),b()}}function d(a){var b,c,d=a.closest(".accordion-section"),e=d.closest(".wp-full-overlay"),g=d.closest(".accordion-container"),h=g.find(".open"),i=e.find("#customize-theme-controls > ul > .accordion-section > .accordion-section-title").add("#customize-info > .accordion-section-title"),j=d.find(".control-panel-back"),k=d.find(".accordion-section-title").first(),l=d.find(".control-panel-content");d.hasClass("current-panel")?(d.toggleClass("current-panel"),e.toggleClass("in-sub-panel"),l.delay(180).hide(0,function(){l.css("margin-top","inherit")}),i.attr("tabindex","0"),j.attr("tabindex","-1"),k.focus(),g.scrollTop(0)):(h.removeClass("open"),h.find(f).show().slideUp(0),l.show(0,function(){b=l.offset().top,c=g.scrollTop(),l.css("margin-top",45-b-c),d.toggleClass("current-panel"),e.toggleClass("in-sub-panel"),g.scrollTop(0)}),i.attr("tabindex","-1"),j.attr("tabindex","0"),j.focus())}a(document).ready(function(){a(".accordion-container").on("click keydown",".accordion-section-title",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),c(a(this)))}),a(".accordion-container").on("click keydown",".control-panel-back",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),d(a(this)))}),a(".hide-postbox-tog").click(function(){b()})});var e=a(".accordion-container li.accordion-section"),f=a(".accordion-section-content");b()}(jQuery);

2
wp-includes/class-wp-customize-section.php
View File

@ -240,7 +240,7 @@ class WP_Customize_Panel extends WP_Customize_Section {
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
<h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
<span class="control-panel-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
<span class="control-panel-back" tabindex="-1"><span class="screen-reader-text">Back to Customize</span></span>
<ul class="accordion-sub-container control-panel-content">
<li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
<div class="accordion-section-title" tabindex="0">