Changeset 29035

Timestamp:

07/08/2014 08:18:30 PM (10 years ago)

Author:

helen

Message:

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.

Location:

trunk/src

Files:

• wp-admin/js/accordion.js (modified) (1 diff)
• wp-includes/class-wp-customize-section.php (modified) (1 diff)

trunk/src/wp-admin/js/accordion.js

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

trunk/src/wp-includes/class-wp-customize-section.php

@@ -241 +241 @@
         <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'; ?>">