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">