Ticket #27406: 27406.keyboard-accessibility.diff

src/wp-admin/js/accordion.js

@@ -73 +73 @@
                         section = panel.closest( '.accordion-section' ),
                         container = section.closest( '.wp-full-overlay' ),
                         siblings = container.find( '.accordion-section.open' ),
+                        topPanel = container.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' ) ) {
@@ -81 +85 @@
                         content.delay( 180 ).hide( 0, function() {
                                 content.css( 'margin-top', 'inherit' ); // Reset
                         } );
+                        topPanel.attr( 'tabindex', '0' );
+                        backBtn.attr( 'tabindex', '-1' );
+                        panelTitle.focus();
                 } else {
                         siblings.removeClass( 'open' );
                         content.show( 0, function() {
@@ -89 +96 @@
                                 section.toggleClass( 'current-panel' );
                                 container.toggleClass( 'in-sub-panel' );
                         } );
+                        topPanel.attr( 'tabindex', '-1' );
+                        backBtn.attr( 'tabindex', '0' );
+                        backBtn.focus();
                 }
         }
 

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

@@ -240 +240 @@
                 ?>
                 <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'; ?>">
                                         <div class="accordion-section-title" tabindex="0">