From 054e4b5e653ca47d3926a207521bd416762cc33b Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Tue, 8 Jul 2014 20:18:30 +0000
Subject: [PATCH] Customizer panels:

* 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@29035 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/accordion.js                  | 27 ++++++++++++++-----
 .../class-wp-customize-section.php            |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/js/accordion.js b/src/wp-admin/js/accordion.js
index e2a6212b55..ca866f8c1c 100644
--- a/src/wp-admin/js/accordion.js
+++ b/src/wp-admin/js/accordion.js
@@ -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();
 		}
 	}
 
diff --git a/src/wp-includes/class-wp-customize-section.php b/src/wp-includes/class-wp-customize-section.php
index 2a61603d8f..3d7bbe6593 100644
--- a/src/wp-includes/class-wp-customize-section.php
+++ b/src/wp-includes/class-wp-customize-section.php
@@ -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">