Ticket #31336: 31336.follow-up.diff

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

@@ -493 +493 @@
         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;

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

@@ -524 +524 @@
                  * @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 +535 @@
 
                                 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 +584 @@
                                 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 +600 @@
                                                 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 +632 @@
                                 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();
                                 }