From e430245d0036c27a5470b4bdaeadd24226b4dcdf Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Fri, 3 Jul 2015 20:18:17 +0000
Subject: [PATCH] Customizer: Accessibility enhancements.

* Move tabindex/focus code into `onChangeExpanded` so that it works for cases where `expand()` is called directly.
* Use `visibility: hidden` to hide hidden elements from keyboard focus and screen readers.

props celloexpressions.
fixes #31336.

git-svn-id: https://develop.svn.wordpress.org/trunk@33069 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css | 13 +++++++++++++
 src/wp-admin/js/customize-controls.js   | 20 ++++++++++----------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index dd0ecb9119..d361766539 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -489,6 +489,19 @@ h3.customize-section-title {
 	transition: left 0s;
 }
 
+.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
+	visibility: hidden;
+	overflow-y: hidden;
+}
+
+.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
+	visibility: visible;
+}
+
+.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
+	overflow-y: auto;
+}
+
 p.customize-section-description {
 	font-style: normal;
 	margin-top: 22px;
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 5d3b635175..b6d1c62d06 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -524,9 +524,7 @@
 		 * @since 4.1.0
 		 */
 		attachEvents: function () {
-			var section = this,
-				backBtn = section.container.find( '.customize-section-back' ),
-				sectionTitle = section.container.find( '.accordion-section-title' ).first();
+			var section = this;
 
 			// Expand/Collapse accordion sections on click.
 			section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
@@ -537,14 +535,8 @@
 
 				if ( section.expanded() ) {
 					section.collapse();
-					backBtn.attr( 'tabindex', '-1' );
-					sectionTitle.attr( 'tabindex', '0' );
-					sectionTitle.focus();
 				} else {
 					section.expand();
-					sectionTitle.attr( 'tabindex', '-1' );
-					backBtn.attr( 'tabindex', '0' );
-					backBtn.focus();
 				}
 			});
 		},
@@ -592,6 +584,8 @@
 				container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
 				content = section.container.find( '.accordion-section-content' ),
 				overlay = section.container.closest( '.wp-full-overlay' ),
+				backBtn = section.container.find( '.customize-section-back' ),
+				sectionTitle = section.container.find( '.accordion-section-title' ).first(),
 				expand;
 
 			if ( expanded && ! section.container.hasClass( 'open' ) ) {
@@ -606,6 +600,10 @@
 						position = content.offset().top;
 						scroll = container.scrollTop();
 						content.css( 'margin-top', ( 45 - position - scroll ) );
+						content.css( 'height', ( window.innerHeight - 90 ) );
+						sectionTitle.attr( 'tabindex', '-1' );
+						backBtn.attr( 'tabindex', '0' );
+						backBtn.focus();
 						if ( args.completeCallback ) {
 							args.completeCallback();
 						}
@@ -634,7 +632,9 @@
 				overlay.removeClass( 'section-open' );
 				content.css( 'margin-top', 'inherit' );
 				container.scrollTop( 0 );
-				section.container.find( '.accordion-section-title' ).focus();
+				backBtn.attr( 'tabindex', '-1' );
+				sectionTitle.attr( 'tabindex', '0' );
+				sectionTitle.focus();
 				if ( args.completeCallback ) {
 					args.completeCallback();
 				}