WordPress.org

Make WordPress Core

Changeset 38084


Ignore:
Timestamp:
07/17/2016 10:18:35 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Improve keyboard navigation on the themes browser modal window.

Improves the containFocus() function to always get the correct first and last
focusable elements, even when the theme browser shows the active theme details.
Also, when on the first and last theme, adds a disabled attribute on the
previous and next navigation buttons to make them not focusable.

Fixes #37383.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/theme.js

    r38019 r38084  
    670670    },
    671671
    672     // Keeps :focus within the theme details elements
     672    // Set initial focus and constrain tabbing within the theme browser modal.
    673673    containFocus: function( $el ) {
    674         var $target;
    675 
    676         // Move focus to the primary action
     674
     675        // Set initial focus on the primary action control.
    677676        _.delay( function() {
    678677            $( '.theme-wrap a.button-primary:visible' ).focus();
    679         }, 500 );
    680 
     678        }, 100 );
     679
     680        // Constrain tabbing within the modal.
    681681        $el.on( 'keydown.wp-themes', function( event ) {
    682 
    683             // Tab key
    684             if ( event.which === 9 ) {
    685                 $target = $( event.target );
    686 
    687                 // Keep focus within the overlay by making the last link on theme actions
    688                 // switch focus to button.left on tabbing and vice versa
    689                 if ( $target.is( 'button.left' ) && event.shiftKey ) {
    690                     $el.find( '.theme-actions a:last-child' ).focus();
     682            var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
     683                $lastFocusable = $el.find( '.theme-actions a:visible' ).last();
     684
     685            // Check for the Tab key.
     686            if ( 9 === event.which ) {
     687                if ( $firstFocusable[0] === event.target && event.shiftKey ) {
     688                    $lastFocusable.focus();
    691689                    event.preventDefault();
    692                 } else if ( $target.is( '.theme-actions a:last-child' ) ) {
    693                     $el.find( 'button.left' ).focus();
     690                } else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
     691                    $firstFocusable.focus();
    694692                    event.preventDefault();
    695693                }
     
    748746        // Disable Left/Right when at the start or end of the collection
    749747        if ( this.model.cid === this.model.collection.at(0).cid ) {
    750             this.$el.find( '.left' ).addClass( 'disabled' );
     748            this.$el.find( '.left' )
     749                .addClass( 'disabled' )
     750                .prop( 'disabled', true );
    751751        }
    752752        if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
    753             this.$el.find( '.right' ).addClass( 'disabled' );
     753            this.$el.find( '.right' )
     754                .addClass( 'disabled' )
     755                .prop( 'disabled', true );
    754756        }
    755757    },
Note: See TracChangeset for help on using the changeset viewer.