WordPress.org

Make WordPress Core

Ticket #26527: 26527.6.2.diff

File 26527.6.2.diff, 6.8 KB (added by matveb, 4 years ago)
  • wp-admin/js/theme.js

     
    188188
    189189        events: {
    190190                'click': 'expand',
     191                'keydown': 'expand',
    191192                'touchend': 'expand',
    192193                'touchmove': 'preventExpand'
    193194        },
     
    197198        render: function() {
    198199                var data = this.model.toJSON();
    199200                // Render themes using the html template
    200                 this.$el.html( this.html( data ) );
     201                this.$el.html( this.html( data ) ).attr( 'tabindex', 0 );
     202
    201203                // Renders active theme styles
    202204                this.activeTheme();
    203205
     
    219221        expand: function( event ) {
    220222                var self = this;
    221223
     224                event = event || window.event;
     225
     226                // 'enter' and 'space' keys expand the details view when a theme is :focused
     227                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
     228                        return;
     229                }
     230
    222231                // Bail if the user scrolled on a touch device
    223232                if ( this.touchDrag === true ) {
    224233                        return this.touchDrag = false;
    225234                }
    226235
    227                 event = event || window.event;
    228 
    229236                // Prevent the modal from showing when the user clicks
    230237                // one of the direct action buttons
    231238                if ( $( event.target ).is( '.theme-actions a' ) ) {
    232239                        return;
    233240                }
    234241
     242                // Set focused theme to current element
     243                themes.focusedTheme = this.$el;
     244
    235245                this.trigger( 'theme:expand', self.model.cid );
    236246        },
    237247
     
    266276                this.navigation();
    267277                // Checks screenshot size
    268278                this.screenshotCheck( this.$el );
     279                // Contain "tabbing" inside the overlay
     280                this.containFocus( this.$el );
     281
     282                // Move focus to the default action
     283                window.setTimeout( function() {
     284                        $( '.theme-wrap a.button-primary:visible' ).focus();
     285                }, 500 );
    269286        },
    270287
    271288        // Adds a class to the currently active theme
     
    275292                this.$el.toggleClass( 'active', this.model.get( 'active' ) );
    276293        },
    277294
     295        // Keeps :focus within the theme details elements
     296        containFocus: function( $el ) {
     297                var $target;
     298
     299                $el.on( 'keydown.wp-themes', function( event ) {
     300
     301                        event = event || window.event;
     302
     303                        // Tab key
     304                        if ( event.which === 9 ) {
     305                                $target = $( event.target );
     306
     307                                // Keep focus within the overlay by making the last link on theme actions
     308                                // switch focus to button.left on tabbing and vice versa
     309                                if ( $target.is( 'button.left' ) && event.shiftKey ) {
     310                                        $el.find( '.theme-actions a:last-child' ).focus();
     311                                        event.preventDefault();
     312                                } else if ( $target.is( '.theme-actions a:last-child' ) ) {
     313                                        $el.find( 'button.left' ).focus();
     314                                        event.preventDefault();
     315                                }
     316                        }
     317                });
     318        },
     319
    278320        // Single theme overlay screen
    279321        // It's shown when clicking a theme
    280322        collapse: function( event ) {
     
    291333                // Detect if the click is inside the overlay
    292334                // and don't close it unless the target was
    293335                // the div.back button
    294                 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
     336                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
    295337
    296338                        // Add a temporary closing class while overlay fades out
    297339                        $( 'body' ).addClass( 'closing-overlay' );
     
    311353
    312354                                // Restore scroll position
    313355                                document.body.scrollTop = scroll;
     356
     357                                // Return focus to the theme div
     358                                if ( themes.focusedTheme ) {
     359                                        themes.focusedTheme.focus();
     360                                }
    314361                        });
    315362                }
    316363        },
  • wp-admin/css/wp-admin.css

     
    64866486        -webkit-transition: opacity 0.1s ease-in-out;
    64876487        transition:         opacity 0.1s ease-in-out;
    64886488}
     6489.theme-browser .theme:focus {
     6490        outline: 1px dotted #222;
     6491}
     6492/* Hide shortcut actions and hover feedback when using tab navigation */
     6493.theme-browser .theme:focus .theme-actions {
     6494        display: none;
     6495}
     6496/* Restore display of theme controls if you hover a focused theme */
     6497.theme-browser .theme:focus:hover .theme-actions {
     6498        display: block;
     6499}
     6500.theme-browser .theme:focus .more-details {
     6501        opacity: 1;
     6502}
     6503/* Current theme needs to have its action always on view */
     6504.theme-browser .theme.active:focus .theme-actions {
     6505        display: block;
     6506}
    64896507
    64906508.theme-browser.rendered .theme:hover .more-details {
    64916509        opacity: 1;
     
    67116729        width: 50px;
    67126730        text-align: center;
    67136731        float: right;
     6732        border: 0;
    67146733        border-left: 1px solid #ddd;
     6734        background-color: transparent;
    67156735}
    67166736
    6717 .theme-overlay .theme-header .close:hover:before {
     6737.theme-overlay .theme-header .close:hover:before,
     6738.theme-overlay .theme-header .close:focus:before {
    67186739        color: #fff;
    67196740}
    67206741
     
    67316752.theme-overlay .theme-header .left {
    67326753        cursor: pointer;
    67336754        color: #777;
     6755        background-color: transparent;
    67346756        height: 48px;
    67356757        width: 54px;
    67366758        float: left;
    67376759        text-align: center;
     6760        border: 0;
    67386761        border-right: 1px solid #ddd;
    6739         -webkit-user-select: none;
    6740         -moz-user-select:    none;
    6741         -ms-user-select:     none;
    6742         user-select:         none;
    67436762}
    67446763
    67456764.theme-overlay .theme-header .close:hover,
    67466765.theme-overlay .theme-header .right:hover,
    6747 .theme-overlay .theme-header .left:hover {
     6766.theme-overlay .theme-header .left:hover,
     6767.theme-overlay .theme-header .close:focus,
     6768.theme-overlay .theme-header .right:focus,
     6769.theme-overlay .theme-header .left:focus {
    67486770        background: #0074a2;
    67496771        color: #fff;
    67506772}
  • wp-admin/themes.php

     
    192192 */
    193193
    194194foreach ( $themes as $theme ) : ?>
    195 <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
     195<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0">
    196196        <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
    197197                <div class="theme-screenshot">
    198198                        <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
     
    279279        <# } #>
    280280        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
    281281        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
    282        
     282
    283283        <# if ( data.active ) { #>
    284284                <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
    285285        <# } else { #>
     
    309309        <div class="theme-backdrop"></div>
    310310        <div class="theme-wrap">
    311311                <div class="theme-header">
    312                         <div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>
    313                         <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
    314                         <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
     312                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
     313                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
     314                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
    315315                </div>
    316316                <div class="theme-about">
    317317                        <div class="theme-screenshots">