Ticket #34391: 34391_5.diff

src/wp-admin/css/common.css

@@ -3330 +3330 @@
         display: none;
 }
 
-.control-section .accordion-section-title {
+.control-section .accordion-section-title,
+.customize-pane-child .accordion-section-title {
         border-left: none;
         border-right: none;
         padding: 10px 10px 11px 14px;
@@ -3338 +3339 @@
         background: #fff;
 }
 
-.control-section .accordion-section-title:after {
+.control-section .accordion-section-title:after,
+.customize-pane-child .accordion-section-title:after {
         top: 11px;
 }
 

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

@@ -77 +77 @@
         line-height: 24px;
 }
 
-#customize-controls .control-section .customize-section-title h3,
-#customize-controls .control-section h3.customize-section-title,
+#customize-controls .customize-pane-child .customize-section-title h3,
+#customize-controls .customize-pane-child h3.customize-section-title,
 #customize-controls .customize-info .panel-title {
         font-size: 20px;
         font-weight: 200;
@@ -229 +229 @@
         box-sizing: border-box;
 }
 
+.wp-full-overlay #customize-controls .wp-full-overlay-sidebar-content {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0); /* Promote to separate layer to avoid full-screen repaints */
+}
+
+#customize-info,
+#customize-theme-controls .customize-pane-parent,
+#customize-theme-controls .customize-pane-child {
+        overflow: visible;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        -webkit-transition: 0.36s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: 0.36s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: 0.36s transform cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: 0.36s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.36s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
+}
+
+#customize-info,
+#customize-theme-controls .customize-pane-parent {
+        position: relative;
+        visibility: visible;
+        height: auto;
+        max-height: none;
+        overflow: auto;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+}
+
+#customize-theme-controls .customize-pane-child {
+        position: absolute;
+        top: 0;
+        left: 0;
+        visibility: hidden;
+        height: 0;
+        max-height: none;
+        overflow: hidden;
+        -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+        transform: translateX(100%);
+}
+
+#customize-theme-controls .customize-pane-child.open,
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+}
+
+#customize-theme-controls .customize-themes-panel.customize-pane-child,
+.section-open #customize-theme-controls .customize-pane-parent,
+.in-sub-panel #customize-theme-controls .customize-pane-parent,
+.section-open #customize-info,
+.in-sub-panel #customize-info,
+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+        visibility: hidden;
+        height: 0;
+        overflow: hidden;
+        -webkit-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
+        transform: translateX(-100%);
+}
+
+.section-open #customize-theme-controls .customize-pane-parent.busy,
+.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
+.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
+.section-open #customize-info.busy,
+.in-sub-panel #customize-info.busy,
+.in-themes-panel #customize-info.busy,
+.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-pane-child.open,
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-pane-child.busy {
+        visibility: visible;
+        height: auto;
+        overflow: auto;
+}
+
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+        -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+        transform: translateX(100%);
+}
+
+#customize-theme-controls .customize-pane-child.accordion-section-content,
+#customize-theme-controls .customize-pane-child.accordion-sub-container {
+        display: block;
+        overflow-x: hidden;
+}
+
+#customize-theme-controls .customize-pane-child.accordion-section-content {
+        padding: 12px;
+}
+
 .customize-section-description-container {
         margin-bottom: 15px;
 }
@@ -268 +370 @@
         color: #555;
 }
 
-#customize-theme-controls {
-        position: relative;
-        left: 0;
-        -webkit-transition: .18s left ease-in-out;
-        transition: .18s left ease-in-out;
-}
-
-.ios #customize-theme-controls {
-        -webkit-transition: left 0s;
-        transition: left 0s;
-}
-
-.section-open #customize-info,
-.section-open #customize-theme-controls {
-        left: -100%;
-}
-
 .accordion-sub-container.control-panel-content {
         display: none;
         position: absolute;
-        left: 100%;
         top: 0;
         width: 100%;
-        -webkit-transition: left ease-in-out .18s;
-        transition: left ease-in-out .18s;
-}
-
-.ios .accordion-sub-container.control-panel-content {
-        -webkit-transition: left 0s;
-        transition: left 0s;
 }
 
-.accordion-sub-container.control-panel-content.animating {
+.accordion-sub-container.control-panel-content.busy {
         display: block;
 }
 
@@ -343 +420 @@
         -webkit-box-shadow: none;
         box-shadow: none;
         cursor: pointer;
-        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
-        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
+        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+        transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .customize-section-back {
         height: 74px;
 }
 
-.ios .customize-panel-back,
-.ios .customize-section-back {
-        -webkit-transition: left 0s;
-        transition: left 0s;
-}
-
 .ios .customize-panel-back {
         display: none;
 }
@@ -423 +494 @@
         padding-left: 62px;
 }
 
-#customize-info,
-#customize-theme-controls > ul > .accordion-section {
-        position: relative;
-        left: 0;
-        -webkit-transition: left ease-in-out .18s;
-        transition: left ease-in-out .18s;
-}
-
-.ios #customize-info,
-.ios #customize-theme-controls > ul > .accordion-section {
-        -webkit-transition: left 0s;
-        transition: left 0s;
-}
-
-.in-sub-panel #customize-info,
-.in-sub-panel #customize-theme-controls > ul > .accordion-section {
-        left: -100%;
-        width: 100%;
-}
-
-.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
-        width: 100%;
-}
-
-#customize-theme-controls .control-section.current-panel {
-        padding: 0;
-}
-
-#customize-theme-controls .control-section > h3.accordion-section-title {
-        position: relative;
-        left: 0;
-}
-
-#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
-        left: -354px;
-        -webkit-transition: left ease-in-out .18s;
-        transition: left ease-in-out .18s;
-}
-
-.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
-        -webkit-transition: left 0s;
-        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;
@@ -1005 +1019 @@
 
 #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
 #customize-theme-controls .control-section-themes > .accordion-section-title {
-        margin: 15px 0;
+        margin: 0 0 15px;
 }
 
-.customize-themes-panel .accordion-section-title {
+#customize-controls .customize-themes-panel .accordion-section-title {
         margin: 15px -8px;
 }
 
-.control-section-themes .accordion-section-title {
+#customize-controls .control-section-themes .accordion-section-title,
+#customize-controls .customize-themes-panel .accordion-section-title {
         padding-right: 100px; /* Space for the button */
 }
 
-.control-section-themes .accordion-section-title span.customize-action,
+#customize-controls .control-section-themes .accordion-section-title span.customize-action,
 #customize-controls .customize-section-title span.customize-action {
         font-size: 13px;
         display: block;
         font-weight: 400;
 }
 
-.control-section-themes .accordion-section-title .change-theme,
-.control-section-themes .accordion-section-title .customize-theme {
+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
         position: absolute;
         right: 10px;
         top: 50%;
@@ -1032 +1047 @@
         font-weight: 400;
 }
 
-.control-section-themes .accordion-section-title:before {
+#customize-controls .control-section-themes .accordion-section-title:before {
         display: none;
 }
 
-.customize-themes-panel {
-        display: none;
+#customize-controls .customize-themes-panel {
         padding: 0 8px;
         background: #f1f1f1;
         -webkit-box-sizing: border-box;
@@ -1045 +1059 @@
         box-sizing: border-box;
 }
 
-.customize-themes-panel .accordion-section-title:first-child {
+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
         margin-top: 0;
 }
 
@@ -1054 +1068 @@
         font-weight: 600;
 }
 
-.customize-themes-panel > h2 {
+#customize-controls .customize-themes-panel > h2 {
         padding: 15px 8px 0 8px;
 }
 
-.control-section.open .customize-themes-panel {
-        display: block;
-}
-
 #customize-theme-controls .customize-themes-panel .accordion-section-content {
         background: transparent;
         display: block;
@@ -1107 +1117 @@
         width: 100%;
 }
 
-#accordion-section-themes .accordion-section-title:after {
+.control-section-themes .accordion-section-title:after,
+.customize-themes-panel .accordion-section-title:after {
         display: none;
 }
 
-#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
-        left: 0;
-}
-
 .customize-themes-panel.control-panel-content {
-        position: absolute;
-        left: -100%;
-        top: 0;
-        width: 100%;
         border-top: 1px solid #ddd;
 }
 
-.in-themes-panel #customize-info,
-.in-themes-panel #customize-theme-controls > ul > .accordion-section {
-        left: 100%;
-}
-
 /* Details View */
 .wp-customizer .theme-overlay {
         display: none;
@@ -1161 +1159 @@
         text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
 }
 
-.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
-        overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
+.in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none; /* Prevent creating new stacking contexts and containing blocks for themes modal. */
 }
 
 .ie8 .wp-customizer .theme-overlay .theme-header,

src/wp-admin/css/customize-nav-menus.css

@@ -381 +381 @@
 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 
-.control-section-nav_menu .menu .menu-item-edit-active {
+.control-section-nav_menu.menu .menu-item-edit-active {
         margin-left: 0;
 }
 
-.control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
+.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
         margin-right: 0;
 }
 
-.control-section-nav_menu .menu .sortable-placeholder {
+.control-section-nav_menu.menu .sortable-placeholder {
         margin-top: 0;
         margin-bottom: 1px;
         max-width: -webkit-calc(100% - 2px);
@@ -403 +403 @@
         float: none;
 }
 
-.control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
+.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
         margin-top: 0;
 }
 

src/wp-admin/customize.php

@@ -142 +142 @@
                         </div>
 
                         <div id="customize-theme-controls">
-                                <ul><?php // Panels and sections are managed here via JavaScript ?></ul>
+                                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
                         </div>
                 </div>
                 </div>

src/wp-admin/js/customize-controls.js

@@ -1 +1 @@
 /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
 (function( exports, $ ){
-        var Container, focus, api = wp.customize;
+        var Container, focus, normalizedTransitionendEventName, api = wp.customize;
 
         /**
          * A Customizer Setting.
@@ -101 +101 @@
                 params = params || {};
                 focus = function () {
                         var focusContainer;
-                        if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) {
-                                focusContainer = construct.container.find( 'ul.control-panel-content' );
-                        } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
-                                focusContainer = construct.container.find( 'ul.accordion-section-content' );
+                        if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
+                                focusContainer = construct.contentContainer;
                         } else {
                                 focusContainer = construct.container;
                         }
@@ -188 +186 @@
         };
 
         /**
+         * Return browser supported `transitionend` event name.
+         *
+         * @since 4.7.0
+         *
+         * @returns {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported.
+         */
+        normalizedTransitionendEventName = (function () {
+                var el, transitions, prop;
+                el = document.createElement( 'div' );
+                transitions = {
+                        'transition'      : 'transitionend',
+                        'OTransition'     : 'oTransitionEnd',
+                        'MozTransition'   : 'transitionend',
+                        'WebkitTransition': 'webkitTransitionEnd'
+                };
+                prop = _.find( _.keys( transitions ), function( prop ) {
+                        return ! _.isUndefined( el.style[ prop ] );
+                } );
+                if ( prop ) {
+                        return transitions[ prop ];
+                } else {
+                        return null;
+                }
+        })();
+
+        /**
          * Base class for Panel and Section.
          *
          * @since 4.1.0
@@ -238 +262 @@
                         if ( 0 === container.container.length ) {
                                 container.container = $( container.getContainer() );
                         }
+                        container.headContainer = container.container;
+                        container.contentContainer = container._getContent();
+                        container.container = container.container.add( container.contentContainer );
 
                         container.deferred = {
                                 embedded: new $.Deferred()
@@ -325 +352 @@
                  * @param {Object}  args.completeCallback
                  */
                 onChangeActive: function( active, args ) {
-                        var duration, construct = this, expandedOtherPanel;
+                        var construct = this,
+                                headContainer = construct.headContainer,
+                                duration, expandedOtherPanel;
+
                         if ( args.unchanged ) {
                                 if ( args.completeCallback ) {
                                         args.completeCallback();
@@ -352 +382 @@
                                 }
                         }
 
-                        if ( ! $.contains( document, construct.container[0] ) ) {
+                        if ( ! $.contains( document, headContainer ) ) {
                                 // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
-                                construct.container.toggle( active );
+                                headContainer.toggle( active );
                                 if ( args.completeCallback ) {
                                         args.completeCallback();
                                 }
                         } else if ( active ) {
-                                construct.container.stop( true, true ).slideDown( duration, args.completeCallback );
+                                headContainer.stop( true, true ).slideDown( duration, args.completeCallback );
                         } else {
                                 if ( construct.expanded() ) {
                                         construct.collapse({
                                                 duration: duration,
                                                 completeCallback: function() {
-                                                        construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
+                                                        headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
                                                 }
                                         });
                                 } else {
-                                        construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
+                                        headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
                                 }
                         }
-
-                        // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
-                        if ( expandedOtherPanel ) {
-                                expandedOtherPanel._recalculateTopMargin();
-                        }
                 },
 
                 /**
@@ -483 +508 @@
                 },
 
                 /**
+                 * Animate container state change if transitions are supported by the browser.
+                 *
+                 * @since 4.7.0
+                 *
+                 * @param {function} completeCallback Function to be called after transition is completed.
+                 * @returns {void}
+                 * @private
+                 */
+                _animateChangeExpanded: function( completeCallback ) {
+                        // Return if CSS transitions are not supported.
+                        if ( ! normalizedTransitionendEventName ) {
+                                if ( completeCallback ) {
+                                        completeCallback();
+                                }
+                                return;
+                        }
+
+                        var construct = this,
+                                content = construct.contentContainer,
+                                overlay = content.closest( '.wp-full-overlay' ),
+                                elements, transitionEndCallback;
+
+                        // Determine set of elements that are affected by the animation.
+                        elements = overlay.add( content );
+                        if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
+                                elements = elements.add( '#customize-info, .customize-pane-parent' );
+                        }
+
+                        // Handle `transitionEnd` event.
+                        transitionEndCallback = function( e ) {
+                                if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) {
+                                        return;
+                                }
+                                content.off( normalizedTransitionendEventName, transitionEndCallback );
+                                elements.removeClass( 'busy' );
+                                if ( completeCallback ) {
+                                        completeCallback();
+                                }
+                        };
+                        content.on( normalizedTransitionendEventName, transitionEndCallback );
+                        elements.addClass( 'busy' );
+
+                        // Prevent screen flicker when pane has been scrolled before expanding.
+                        _.defer( function() {
+                                var container = content.closest( '.wp-full-overlay-sidebar-content' ),
+                                        currentScrollTop = container.scrollTop(),
+                                        previousScrollTop = content.data( 'previous-scrollTop' ) || 0,
+                                        expanded = construct.expanded();
+
+                                if ( expanded && 0 < currentScrollTop ) {
+                                        content.css( 'top', currentScrollTop + 'px' );
+                                        content.data( 'previous-scrollTop', currentScrollTop );
+                                } else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) {
+                                        content.css( 'top', previousScrollTop - currentScrollTop + 'px' );
+                                        container.scrollTop( previousScrollTop );
+                                }
+                        } );
+                },
+
+                /**
                  * Bring the container into view and then expand this and bring it into view
                  * @param {Object} [params]
                  */
@@ -507 +592 @@
                         }
 
                         return '<li></li>';
+                },
+
+                /**
+                 * Find content element, relate it to the parent container with `aria-owns`, detach and return.
+                 *
+                 * @since 4.7.0
+                 *
+                 * @returns {jQuery} Detached content element.
+                 * @private
+                 */
+                _getContent: function() {
+                        var construct = this,
+                                container = construct.container,
+                                content = container.find( '.accordion-section-content, .control-panel-content' ).first(),
+                                contentId = 'sub-' + container.attr( 'id' ),
+                                ownedElements = contentId,
+                                alreadyOwnedElements = container.attr( 'aria-owns' );
+
+                        if ( alreadyOwnedElements ) {
+                                ownedElements = ownedElements + ' ' + alreadyOwnedElements;
+                        }
+                        container.attr( 'aria-owns', ownedElements );
+
+                        return content.detach().attr( {
+                                'id': contentId,
+                                'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' )
+                        } );
                 }
         });
 
@@ -552 +664 @@
                         section.id = id;
                         section.panel = new api.Value();
                         section.panel.bind( function ( id ) {
-                                $( section.container ).toggleClass( 'control-subsection', !! id );
+                                $( section.headContainer ).toggleClass( 'control-subsection', !! id );
                         });
                         section.panel.set( section.params.panel || '' );
                         api.utils.bubbleChildValueChanges( section, [ 'panel' ] );
@@ -569 +681 @@
                  * @since 4.1.0
                  */
                 embed: function () {
-                        var section = this, inject;
+                        var inject,
+                                section = this,
+                                container = $( '#customize-theme-controls' );
 
                         // Watch for changes to the panel state
                         inject = function ( panelId ) {
@@ -579 +693 @@
                                         api.panel( panelId, function ( panel ) {
                                                 // The panel has been registered, wait for it to become ready/initialized
                                                 panel.deferred.embedded.done( function () {
-                                                        parentContainer = panel.container.find( 'ul:first' );
-                                                        if ( ! section.container.parent().is( parentContainer ) ) {
-                                                                parentContainer.append( section.container );
+                                                        parentContainer = panel.contentContainer;
+                                                        if ( ! section.headContainer.parent().is( parentContainer ) ) {
+                                                                parentContainer.append( section.headContainer );
+                                                        }
+                                                        if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+                                                                container.append( section.contentContainer );
                                                         }
                                                         section.deferred.embedded.resolve();
                                                 });
                                         } );
                                 } else {
                                         // There is no panel, so embed the section in the root of the customizer
-                                        parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
-                                        if ( ! section.container.parent().is( parentContainer ) ) {
-                                                parentContainer.append( section.container );
+                                        parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
+                                        if ( ! section.headContainer.parent().is( parentContainer ) ) {
+                                                parentContainer.append( section.headContainer );
+                                        }
+                                        if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+                                                container.append( section.contentContainer );
                                         }
                                         section.deferred.embedded.resolve();
                                 }
                         };
                         section.panel.bind( inject );
                         inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
-
-                        section.deferred.embedded.done(function() {
-                                // Fix the top margin after reflow.
-                                api.bind( 'pane-contents-reflowed', _.debounce( function() {
-                                        section._recalculateTopMargin();
-                                }, 100 ) );
-                        });
                 },
 
                 /**
@@ -669 +782 @@
                  */
                 onChangeExpanded: function ( expanded, args ) {
                         var section = this,
-                                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(),
-                                headerActionsHeight = $( '#customize-header-actions' ).height(),
-                                resizeContentHeight, expand, position, scroll;
+                                container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
+                                content = section.contentContainer,
+                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
+                                backBtn = content.find( '.customize-section-back' ),
+                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
+                                expand;
 
-                        if ( expanded && ! section.container.hasClass( 'open' ) ) {
+                        if ( expanded && ! content.hasClass( 'open' ) ) {
 
                                 if ( args.unchanged ) {
                                         expand = args.completeCallback;
                                 } else {
-                                        container.scrollTop( 0 );
-                                        resizeContentHeight = function() {
-                                                var matchMedia, offset;
-                                                matchMedia = window.matchMedia || window.msMatchMedia;
-                                                offset = 90; // 45px for customize header actions + 45px for footer actions.
-
-                                                // No footer on small screens.
-                                                if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
-                                                        offset = 45;
-                                                }
-                                                content.css( 'height', ( window.innerHeight - offset ) );
-                                        };
-                                        expand = function() {
-                                                section.container.addClass( 'open' );
-                                                overlay.addClass( 'section-open' );
-                                                position = content.offset().top;
-                                                scroll = container.scrollTop();
-                                                content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
-                                                resizeContentHeight();
-                                                sectionTitle.attr( 'tabindex', '-1' );
-                                                backBtn.attr( 'tabindex', '0' );
-                                                backBtn.focus();
-                                                if ( args.completeCallback ) {
-                                                        args.completeCallback();
-                                                }
+                                        expand = $.proxy( function() {
+                                                section._animateChangeExpanded( function() {
+                                                        sectionTitle.attr( 'tabindex', '-1' );
+                                                        backBtn.attr( 'tabindex', '0' );
 
-                                                // Fix the height after browser resize.
-                                                $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
+                                                        backBtn.focus();
+                                                        content.css( 'top', '' );
+                                                        container.scrollTop( 0 );
 
-                                                setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
-                                        };
+                                                        if ( args.completeCallback ) {
+                                                                args.completeCallback();
+                                                        }
+                                                } );
+
+                                                content.addClass( 'open' );
+                                                overlay.addClass( 'section-open' );
+                                        }, this );
                                 }
 
                                 if ( ! args.allowMultiple ) {
@@ -735 +833 @@
                                         expand();
                                 }
 
-                        } else if ( ! expanded && section.container.hasClass( 'open' ) ) {
-                                section.container.removeClass( 'open' );
+                        } else if ( ! expanded && content.hasClass( 'open' ) ) {
+                                section._animateChangeExpanded( function() {
+                                        backBtn.attr( 'tabindex', '-1' );
+                                        sectionTitle.attr( 'tabindex', '0' );
+
+                                        sectionTitle.focus();
+                                        content.css( 'top', '' );
+
+                                        if ( args.completeCallback ) {
+                                                args.completeCallback();
+                                        }
+                                } );
+
+                                content.removeClass( 'open' );
                                 overlay.removeClass( 'section-open' );
-                                content.css( 'margin-top', '' );
-                                container.scrollTop( 0 );
-                                backBtn.attr( 'tabindex', '-1' );
-                                sectionTitle.attr( 'tabindex', '0' );
-                                sectionTitle.focus();
-                                if ( args.completeCallback ) {
-                                        args.completeCallback();
-                                }
-                                $( window ).off( 'resize.customizer-section' );
+
                         } else {
                                 if ( args.completeCallback ) {
                                         args.completeCallback();
                                 }
                         }
-                },
-
-                /**
-                 * Recalculate the top margin.
-                 *
-                 * @since 4.4.0
-                 * @private
-                 */
-                _recalculateTopMargin: function() {
-                        var section = this, content, offset, headerActionsHeight;
-                        content = section.container.find( '.accordion-section-content' );
-                        if ( 0 === content.length ) {
-                                return;
-                        }
-                        headerActionsHeight = $( '#customize-header-actions' ).height();
-                        offset = ( content.offset().top - headerActionsHeight );
-                        if ( 0 < offset ) {
-                                content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
-                        }
                 }
         });
 
@@ -948 +1031 @@
                         }
 
                         // Note: there is a second argument 'args' passed
-                        var position, scroll,
-                                panel = this,
-                                section = panel.container.closest( '.accordion-section' ),
+                        var panel = this,
+                                section = panel.contentContainer,
                                 overlay = section.closest( '.wp-full-overlay' ),
                                 container = section.closest( '.wp-full-overlay-sidebar-content' ),
-                                siblings = container.find( '.open' ),
                                 customizeBtn = section.find( '.customize-theme' ),
-                                changeBtn = section.find( '.change-theme' ),
-                                content = section.find( '.control-panel-content' );
-
-                        if ( expanded ) {
+                                changeBtn = panel.headContainer.find( '.change-theme' );
 
+                        if ( expanded && ! section.hasClass( 'current-panel' ) ) {
                                 // Collapse any sibling sections/panels
                                 api.section.each( function ( otherSection ) {
                                         if ( otherSection !== panel ) {
@@ -970 +1049 @@
                                         otherPanel.collapse( { duration: 0 } );
                                 });
 
-                                content.show( 0, function() {
-                                        position = content.offset().top;
-                                        scroll = container.scrollTop();
-                                        content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
-                                        section.addClass( 'current-panel' );
-                                        overlay.addClass( 'in-themes-panel' );
+                                panel._animateChangeExpanded( function() {
+                                        changeBtn.attr( 'tabindex', '-1' );
+                                        customizeBtn.attr( 'tabindex', '0' );
+
+                                        customizeBtn.focus();
+                                        section.css( 'top', '' );
                                         container.scrollTop( 0 );
-                                        _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
-                                        panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
+
                                         if ( args.completeCallback ) {
                                                 args.completeCallback();
                                         }
                                 } );
-                                customizeBtn.focus();
-                        } else {
-                                siblings.removeClass( 'open' );
-                                section.removeClass( 'current-panel' );
-                                overlay.removeClass( 'in-themes-panel' );
-                                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
-                                content.delay( 180 ).hide( 0, function() {
-                                        content.css( 'margin-top', 'inherit' ); // Reset
+
+                                overlay.addClass( 'in-themes-panel' );
+                                section.addClass( 'current-panel' );
+
+                        } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
+                                panel._animateChangeExpanded( function() {
+                                        changeBtn.attr( 'tabindex', '0' );
+                                        customizeBtn.attr( 'tabindex', '-1' );
+
+                                        changeBtn.focus();
+                                        section.css( 'top', '' );
+
                                         if ( args.completeCallback ) {
                                                 args.completeCallback();
                                         }
                                 } );
-                                customizeBtn.attr( 'tabindex', '0' );
-                                changeBtn.focus();
-                                container.scrollTop( 0 );
-                        }
-                },
 
-                /**
-                 * Recalculate the top margin.
-                 *
-                 * @since 4.4.0
-                 * @private
-                 */
-                _recalculateTopMargin: function() {
-                        api.Panel.prototype._recalculateTopMargin.call( this );
+                                overlay.removeClass( 'in-themes-panel' );
+                                section.removeClass( 'current-panel' );
+                        }
                 },
 
                 /**
@@ -1237 +1309 @@
                  */
                 embed: function () {
                         var panel = this,
-                                parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable
+                                container = $( '#customize-theme-controls' ),
+                                parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
 
-                        if ( ! panel.container.parent().is( parentContainer ) ) {
-                                parentContainer.append( panel.container );
+                        if ( ! panel.headContainer.parent().is( parentContainer ) ) {
+                                parentContainer.append( panel.headContainer );
+                        }
+                        if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
+                                container.append( panel.contentContainer );
                                 panel.renderContent();
                         }
 
-                        api.bind( 'pane-contents-reflowed', _.debounce( function() {
-                                panel._recalculateTopMargin();
-                        }, 100 ) );
-
                         panel.deferred.embedded.resolve();
                 },
 
@@ -1258 +1330 @@
                         var meta, panel = this;
 
                         // Expand/Collapse accordion sections on click.
-                        panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
+                        panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }
@@ -1289 +1361 @@
                                 }
                                 event.preventDefault(); // Keep this AFTER the key filter above
 
-                                meta = panel.container.find( '.panel-meta' );
                                 if ( meta.hasClass( 'cannot-expand' ) ) {
                                         return;
                                 }
@@ -1359 +1430 @@
                         }
 
                         // Note: there is a second argument 'args' passed
-                        var position, scroll,
-                                panel = this,
-                                accordionSection = panel.container.closest( '.accordion-section' ),
+                        var panel = this,
+                                accordionSection = panel.contentContainer,
                                 overlay = accordionSection.closest( '.wp-full-overlay' ),
                                 container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
-                                siblings = container.find( '.open' ),
-                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
-                                backBtn = accordionSection.find( '.customize-panel-back' ),
-                                panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
-                                content = accordionSection.find( '.control-panel-content' ),
-                                headerActionsHeight = $( '#customize-header-actions' ).height();
-
-                        if ( expanded ) {
+                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
+                                backBtn = accordionSection.find( '.customize-panel-back' );
 
+                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
                                 // Collapse any sibling sections/panels
                                 api.section.each( function ( section ) {
                                         if ( panel.id !== section.panel() ) {
@@ -1385 +1450 @@
                                         }
                                 });
 
-                                content.show( 0, function() {
-                                        content.parent().show();
-                                        position = content.offset().top;
-                                        scroll = container.scrollTop();
-                                        content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
-                                        accordionSection.addClass( 'current-panel' );
-                                        overlay.addClass( 'in-sub-panel' );
+                                panel._animateChangeExpanded( function() {
+                                        topPanel.attr( 'tabindex', '-1' );
+                                        backBtn.attr( 'tabindex', '0' );
+
+                                        backBtn.focus();
+                                        accordionSection.css( 'top', '' );
                                         container.scrollTop( 0 );
+
                                         if ( args.completeCallback ) {
                                                 args.completeCallback();
                                         }
                                 } );
-                                topPanel.attr( 'tabindex', '-1' );
-                                backBtn.attr( 'tabindex', '0' );
-                                backBtn.focus();
-                                panel._recalculateTopMargin();
-                        } else {
-                                siblings.removeClass( 'open' );
-                                accordionSection.removeClass( 'current-panel' );
-                                overlay.removeClass( 'in-sub-panel' );
-                                content.delay( 180 ).hide( 0, function() {
-                                        content.css( 'margin-top', 'inherit' ); // Reset
+
+                                overlay.addClass( 'in-sub-panel' );
+                                accordionSection.addClass( 'current-panel' );
+
+                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
+                                panel._animateChangeExpanded( function() {
+                                        topPanel.attr( 'tabindex', '0' );
+                                        backBtn.attr( 'tabindex', '-1' );
+
+                                        topPanel.focus();
+                                        accordionSection.css( 'top', '' );
+
                                         if ( args.completeCallback ) {
                                                 args.completeCallback();
                                         }
                                 } );
-                                topPanel.attr( 'tabindex', '0' );
-                                backBtn.attr( 'tabindex', '-1' );
-                                panelTitle.focus();
-                                container.scrollTop( 0 );
-                        }
-                },
 
-                /**
-                 * Recalculate the top margin.
-                 *
-                 * @since 4.4.0
-                 * @private
-                 */
-                _recalculateTopMargin: function() {
-                        var panel = this, headerActionsHeight, content, accordionSection;
-                        headerActionsHeight = $( '#customize-header-actions' ).height();
-                        accordionSection = panel.container.closest( '.accordion-section' );
-                        content = accordionSection.find( '.control-panel-content' );
-                        content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
+                                overlay.removeClass( 'in-sub-panel' );
+                                accordionSection.removeClass( 'current-panel' );
+                        }
                 },
 
                 /**
@@ -1449 +1501 @@
                         } else {
                                 template = wp.template( 'customize-panel-default-content' );
                         }
-                        if ( template && panel.container ) {
-                                panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
+                        if ( template && panel.headContainer ) {
+                                panel.contentContainer.html( template( panel.params ) );
                         }
                 }
         });
@@ -1626 +1678 @@
                                 api.section( sectionId, function ( section ) {
                                         // Wait for the section to be ready/initialized
                                         section.deferred.embedded.done( function () {
-                                                parentContainer = section.container.find( 'ul:first' );
+                                                parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
                                                 if ( ! control.container.parent().is( parentContainer ) ) {
                                                         parentContainer.append( control.container );
                                                         control.renderContent();
@@ -3542 +3594 @@
          */
         api.reflowPaneContents = _.bind( function () {
 
-                var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false;
+                var appendContainer, activeElement, rootHeadContainers, rootNodes = [], wasReflowed = false;
 
                 if ( document.activeElement ) {
                         activeElement = $( document.activeElement );
@@ -3551 +3603 @@
                 // Sort the sections within each panel
                 api.panel.each( function ( panel ) {
                         var sections = panel.sections(),
-                                sectionContainers = _.pluck( sections, 'container' );
+                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
                         rootNodes.push( panel );
-                        appendContainer = panel.container.find( 'ul:first' );
-                        if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
+                        appendContainer = ( panel.contentContainer.is( 'ul' ) ) ? panel.contentContainer : panel.contentContainer.find( 'ul:first' );
+                        if ( ! api.utils.areElementListsEqual( sectionHeadContainers, appendContainer.children( '[id]' ) ) ) {
                                 _( sections ).each( function ( section ) {
-                                        appendContainer.append( section.container );
+                                        appendContainer.append( section.headContainer );
                                 } );
                                 wasReflowed = true;
                         }
@@ -3569 +3621 @@
                         if ( ! section.panel() ) {
                                 rootNodes.push( section );
                         }
-                        appendContainer = section.container.find( 'ul:first' );
+                        appendContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
                         if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
                                 _( controls ).each( function ( control ) {
                                         appendContainer.append( control.container );
@@ -3580 +3632 @@
 
                 // Sort the root panels and sections
                 rootNodes.sort( api.utils.prioritySort );
-                rootContainers = _.pluck( rootNodes, 'container' );
-                appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
-                if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
+                rootHeadContainers = _.pluck( rootNodes, 'headContainer' );
+                appendContainer = $( '#customize-theme-controls .customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
+                if ( ! api.utils.areElementListsEqual( rootHeadContainers, appendContainer.children() ) ) {
                         _( rootNodes ).each( function ( rootNode ) {
-                                appendContainer.append( rootNode.container );
+                                appendContainer.append( rootNode.headContainer );
                         } );
                         wasReflowed = true;
                 }

src/wp-admin/js/customize-nav-menus.js

@@ -834 +834 @@
 
                         api.bind( 'pane-contents-reflowed', function() {
                                 // Skip menus that have been removed.
-                                if ( ! section.container.parent().length ) {
+                                if ( ! section.contentContainer.parent().length ) {
                                         return;
                                 }
                                 section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
@@ -952 +952 @@
                         var section = this;
 
                         if ( expanded ) {
-                                wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' );
+                                wpNavMenu.menuList = section.contentContainer;
                                 wpNavMenu.targetList = wpNavMenu.menuList;
 
                                 // Add attributes needed by wpNavMenu
@@ -1014 +1014 @@
                 onChangeExpanded: function( expanded ) {
                         var section = this,
                                 button = section.container.find( '.add-menu-toggle' ),
-                                content = section.container.find( '.new-menu-section-content' ),
-                                customizer = section.container.closest( '.wp-full-overlay-sidebar-content' );
+                                content = section.contentContainer,
+                                customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
                         if ( expanded ) {
                                 button.addClass( 'open' );
                                 button.attr( 'aria-expanded', 'true' );
@@ -1028 +1028 @@
                                 content.slideUp( 'fast' );
                                 content.find( '.menu-name-field' ).removeClass( 'invalid' );
                         }
+                },
+
+                /**
+                 * Detach and return the content html, extracted from the container html, if it exists.
+                 *
+                 * @since 4.7.0
+                 *
+                 * @returns {jQuery} Content UL element.
+                 */
+                _getContent: function () {
+                        return this.container.find( 'ul:first' );
                 }
         });
 
@@ -1984 +1995 @@
                  */
                 ready: function() {
                         var control = this,
+                                section = api.section( control.section() ),
                                 menuId = control.params.menu_id,
                                 menu = control.setting(),
                                 name,
@@ -2000 +2012 @@
                          * being deactivated.
                          */
                         control.active.validate = function() {
-                                var value, section = api.section( control.section() );
+                                var value;
                                 if ( section ) {
                                         value = section.active();
                                 } else {
@@ -2009 +2021 @@
                                 return value;
                         };
 
-                        control.$controlSection = control.container.closest( '.control-section' );
+                        control.$controlSection = section.headContainer;
                         control.$sectionContent = control.container.closest( '.accordion-section-content' );
 
                         this._setupModel();
@@ -2283 +2295 @@
                                         return;
                                 }
 
-                                var section = control.container.closest( '.accordion-section' ),
+                                var section = api.section( control.section() ),
                                         menuId = control.params.menu_id,
-                                        controlTitle = section.find( '.accordion-section-title' ),
-                                        sectionTitle = section.find( '.customize-section-title h3' ),
-                                        location = section.find( '.menu-in-location' ),
+                                        controlTitle = section.headContainer.find( '.accordion-section-title' ),
+                                        sectionTitle = section.contentContainer.find( '.customize-section-title h3' ),
+                                        location = section.headContainer.find( '.menu-in-location' ),
                                         action = sectionTitle.find( '.customize-action' ),
                                         name = displayNavMenuName( menu.name );
 
@@ -2311 +2323 @@
                                 } );
 
                                 // Update the nav menu name in all location checkboxes.
-                                section.find( '.customize-control-checkbox input' ).each( function() {
+                                section.contentContainer.find( '.customize-control-checkbox input' ).each( function() {
                                         if ( $( this ).prop( 'checked' ) ) {
                                                 $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
                                         }
@@ -2625 +2637 @@
 
                         // Focus on the new menu section.
                         api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
-
-                        // Fix an issue with extra space at top immediately after creating new menu.
-                        $( '#menu-to-edit' ).css( 'margin-top', 0 );
                 }
         });
 

tests/qunit/wp-admin/js/customize-controls.js

@@ -211 +211 @@
                 section = wp.customize.section( id );
                 ok( ! section.params.content );
                 ok( !! section.container );
-                ok( section.container.is( '.control-section.control-section-default' ) );
-                ok( 1 === section.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === section.container.find( '> .accordion-section-content' ).length );
+                ok( !! section.headContainer );
+                ok( !! section.contentContainer );
+                ok( section.container.has( section.headContainer ) );
+                ok( section.container.has( section.contentContainer ) );
+                ok( section.headContainer.is( '.control-section.control-section-default' ) );
+                ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
+                ok( section.contentContainer.is( '.accordion-section-content' ) );
+                equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
         } );
 
         module( 'Customizer Custom Type (titleless) Section with Template in Fixture' );
@@ -225 +230 @@
                 section = wp.customize.section( id );
                 ok( ! section.params.content );
                 ok( !! section.container );
+                ok( !! section.headContainer );
+                ok( !! section.contentContainer );
+                ok( section.container.has( section.headContainer ) );
+                ok( section.container.has( section.contentContainer ) );
                 ok( section.container.is( '.control-section.control-section-titleless' ) );
-                ok( 0 === section.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === section.container.find( '> .accordion-section-content' ).length );
+                ok( 0 === section.headContainer.find( '> .accordion-section-title' ).length );
+                ok( section.contentContainer.is( '.accordion-section-content' ) );
+                equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
         } );
         module( 'Customizer Custom Type Section Lacking Specific Template' );
         test( 'Fixture section has expected content', function () {
@@ -235 +245 @@
                 section = wp.customize.section( id );
                 ok( ! section.params.content );
                 ok( !! section.container );
-                ok( section.container.is( '.control-section.control-section-' + section.params.type ) );
-                ok( 1 === section.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === section.container.find( '> .accordion-section-content' ).length );
+                ok( !! section.headContainer );
+                ok( !! section.contentContainer );
+                ok( section.container.has( section.headContainer ) );
+                ok( section.container.has( section.contentContainer ) );
+                ok( section.headContainer.is( '.control-section.control-section-' + section.params.type ) );
+                ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
+                ok( section.contentContainer.is( '.accordion-section-content' ) );
+                equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
         } );
         module( 'Customizer Section lacking any params' );
         test( 'Fixture section has default params supplied', function () {
@@ -270 +285 @@
                 var panel = wp.customize.panel( 'fixture-panel' );
                 ok( !! panel.params.content );
                 ok( !! panel.container );
+                ok( !! panel.headContainer );
+                ok( !! panel.contentContainer );
+                ok( panel.container.has( panel.headContainer ) );
+                ok( panel.container.has( panel.contentContainer ) );
         } );
         test( 'Fixture panel has section among its sections()', function () {
                 var panel = wp.customize.panel( 'fixture-panel' );
@@ -304 +323 @@
                 panel = wp.customize.panel( id );
                 ok( ! panel.params.content );
                 ok( !! panel.container );
-                ok( panel.container.is( '.control-panel.control-panel-default' ) );
-                ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === panel.container.find( '> .control-panel-content' ).length );
+                ok( !! panel.headContainer );
+                ok( !! panel.contentContainer );
+                ok( panel.container.has( panel.headContainer ) );
+                ok( panel.container.has( panel.contentContainer ) );
+                ok( panel.headContainer.is( '.control-panel.control-panel-default' ) );
+                ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
+                ok( panel.contentContainer.is( '.control-panel-content' ) );
+                equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
         } );
 
         module( 'Customizer Custom Type Panel (titleless) with Template in Fixture' );
@@ -318 +342 @@
                 panel = wp.customize.panel( id );
                 ok( ! panel.params.content );
                 ok( !! panel.container );
-                ok( panel.container.is( '.control-panel.control-panel-titleless' ) );
-                ok( 0 === panel.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === panel.container.find( '> .control-panel-content' ).length );
+                ok( !! panel.headContainer );
+                ok( !! panel.contentContainer );
+                ok( panel.container.has( panel.headContainer ) );
+                ok( panel.container.has( panel.contentContainer ) );
+                ok( panel.headContainer.is( '.control-panel.control-panel-titleless' ) );
+                ok( 0 === panel.headContainer.find( '> .accordion-section-title' ).length );
+                ok( panel.contentContainer.is( '.control-panel-content' ) );
+                equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
         } );
 
         module( 'Customizer Custom Type Panel Lacking Specific Template' );
@@ -329 +358 @@
                 panel = wp.customize.panel( id );
                 ok( ! panel.params.content );
                 ok( !! panel.container );
-                ok( panel.container.is( '.control-panel.control-panel-' + panel.params.type ) );
-                ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
-                ok( 1 === panel.container.find( '> .control-panel-content' ).length );
+                ok( !! panel.headContainer );
+                ok( !! panel.contentContainer );
+                ok( panel.container.has( panel.headContainer ) );
+                ok( panel.container.has( panel.contentContainer ) );
+                ok( panel.headContainer.is( '.control-panel.control-panel-' + panel.params.type ) );
+                ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
+                ok( panel.contentContainer.is( '.control-panel-content' ) );
+                equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
         } );
         module( 'Customizer Panel lacking any params' );
         test( 'Fixture panel has default params supplied', function () {

tests/qunit/wp-admin/js/customize-widgets.js

@@ -58 +58 @@
                 ok( panel.extended( api.Widgets.WidgetsPanel ) );
 
                 panel.deferred.embedded.done( function() {
-                        ok( 1 === panel.container.find( '.no-widget-areas-rendered-notice' ).length );
-                        ok( panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
+                        ok( 1 === panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).length );
+                        ok( panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
                         api.section( 'sidebar-widgets-sidebar-1' ).active( true );
                         api.control( 'sidebars_widgets[sidebar-1]' ).active( true );
                         api.trigger( 'pane-contents-reflowed' );
-                        ok( ! panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
+                        ok( ! panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
                 } );
 
                 expect( 4 );