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.
Built from https://develop.svn.wordpress.org/trunk@33069


git-svn-id: http://core.svn.wordpress.org/trunk@33040 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -489,6 +489,19 @@ h3.customize-section-title {
 	transition: right 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;

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;

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();
 				}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-beta1-33068';
+$wp_version = '4.3-beta1-33069';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.