WordPress.org

Make WordPress Core

Ticket #27406: 27406.keyboard-accessibility.diff

File 27406.keyboard-accessibility.diff, 2.3 KB (added by celloexpressions, 4 years ago)

Fix keyboard accessibility in panels by removing hidden elements from focus and moving the focus as needed.

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

     
    7373                        section = panel.closest( '.accordion-section' ),
    7474                        container = section.closest( '.wp-full-overlay' ),
    7575                        siblings = container.find( '.accordion-section.open' ),
     76                        topPanel = container.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' )
     77                                                                .add( '#customize-info > .accordion-section-title' ),
     78                        backBtn = section.find( '.control-panel-back' );
     79                        panelTitle = section.find( '.accordion-section-title' ).first();
    7680                        content = section.find( '.control-panel-content' );
    7781
    7882                if ( section.hasClass( 'current-panel' ) ) {
     
    8185                        content.delay( 180 ).hide( 0, function() {
    8286                                content.css( 'margin-top', 'inherit' ); // Reset
    8387                        } );
     88                        topPanel.attr( 'tabindex', '0' );
     89                        backBtn.attr( 'tabindex', '-1' );
     90                        panelTitle.focus();
    8491                } else {
    8592                        siblings.removeClass( 'open' );
    8693                        content.show( 0, function() {
     
    8996                                section.toggleClass( 'current-panel' );
    9097                                container.toggleClass( 'in-sub-panel' );
    9198                        } );
     99                        topPanel.attr( 'tabindex', '-1' );
     100                        backBtn.attr( 'tabindex', '0' );
     101                        backBtn.focus();
    92102                }
    93103        }
    94104
  • src/wp-includes/class-wp-customize-section.php

     
    240240                ?>
    241241                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
    242242                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
    243                         <span class="control-panel-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
     243                        <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text">Back to Customize</span></span>
    244244                        <ul class="accordion-sub-container control-panel-content">
    245245                                <li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
    246246                                        <div class="accordion-section-title" tabindex="0">