WordPress.org

Make WordPress Core

Ticket #26527: 26527.3.diff

File 26527.3.diff, 7.4 KB (added by azaozz, 4 years ago)
  • src/wp-admin/css/wp-admin.css

     
    64166416        border-left: 1px solid rgba(0,0,0,0.05); 
    64176417} 
    64186418 
     6419.theme-browser .theme:focus .theme-actions, 
     6420.theme-browser .theme.hover .theme-actions, 
    64196421.theme-browser .theme:hover .theme-actions { 
    64206422        opacity: 1; 
    64216423} 
     
    64716473.theme-browser .theme .more-details { 
    64726474        opacity: 0; 
    64736475        position: absolute; 
    6474                 top: 35%; 
    6475                 right: 25%; 
    6476                 left: 25%; 
     6476        top: 35%; 
     6477        right: 25%; 
     6478        left: 25%; 
     6479        margin: auto; 
     6480        width: 50%; 
    64776481        background: rgba(0,0,0,0.7); 
    64786482        color: #fff; 
    64796483        font-size: 15px; 
     
    64826486        font-weight: 600; 
    64836487        padding: 15px 12px; 
    64846488        text-align: center; 
     6489        border: 0; 
    64856490        border-radius: 3px; 
    64866491        -webkit-transition: opacity 0.1s ease-in-out; 
    64876492        transition:         opacity 0.1s ease-in-out; 
    64886493} 
    64896494 
     6495.theme-browser .theme .more-details:focus { 
     6496        outline: 1px dotted #000; 
     6497} 
     6498 
     6499.theme-browser.rendered .theme.hover .more-details, 
    64906500.theme-browser.rendered .theme:hover .more-details { 
    64916501        opacity: 1; 
    64926502} 
     
    67116721        width: 50px; 
    67126722        text-align: center; 
    67136723        float: right; 
     6724        border: 0; 
    67146725        border-left: 1px solid #ddd; 
     6726        background-color: transparent; 
    67156727} 
    67166728 
    6717 .theme-overlay .theme-header .close:hover:before { 
     6729.theme-overlay .theme-header .close:hover:before, 
     6730.theme-overlay .theme-header .close:focus:before { 
    67186731        color: #fff; 
    67196732} 
    67206733 
     
    67316744.theme-overlay .theme-header .left { 
    67326745        cursor: pointer; 
    67336746        color: #777; 
     6747        background-color: transparent; 
    67346748        height: 48px; 
    67356749        width: 54px; 
    67366750        float: left; 
    67376751        text-align: center; 
     6752        border: 0; 
    67386753        border-right: 1px solid #ddd; 
    6739         -webkit-user-select: none; 
    6740         -moz-user-select:    none; 
    6741         -ms-user-select:     none; 
    6742         user-select:         none; 
    67436754} 
    67446755 
    67456756.theme-overlay .theme-header .close:hover, 
    67466757.theme-overlay .theme-header .right:hover, 
    6747 .theme-overlay .theme-header .left:hover { 
     6758.theme-overlay .theme-header .left:hover, 
     6759.theme-overlay .theme-header .close:focus, 
     6760.theme-overlay .theme-header .right:focus, 
     6761.theme-overlay .theme-header .left:focus { 
    67486762        background: #0074a2; 
    67496763        color: #fff; 
    67506764} 
  • src/wp-admin/js/theme.js

     
    44( function($) { 
    55 
    66// Set up our namespace... 
    7 var themes, l10n; 
     7var themes, l10n, $focusedTheme; 
    88themes = wp.themes = wp.themes || {}; 
    99 
    1010// Store the theme data and settings for organized and quick access 
     
    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                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { // enter && space 
     225                        return; 
     226                } 
     227 
    222228                // Bail if the user scrolled on a touch device 
    223229                if ( this.touchDrag === true ) { 
    224230                        return this.touchDrag = false; 
     
    232238                        return; 
    233239                } 
    234240 
     241                $focusedTheme = this.$el; 
    235242                this.trigger( 'theme:expand', self.model.cid ); 
    236243        }, 
    237244 
     
    266273                this.navigation(); 
    267274                // Checks screenshot size 
    268275                this.screenshotCheck( this.$el ); 
     276                // Contain "tabbing" inside the overlay 
     277                this.containFocus( this.$el ); 
     278 
     279                // Move focus to the default action 
     280                window.setTimeout( function() { 
     281                        $( '.theme-wrap a.button-primary:visible' ).focus(); 
     282                }, 500 ) 
    269283        }, 
    270284 
    271285        // Adds a class to the currently active theme 
     
    275289                this.$el.toggleClass( 'active', this.model.get( 'active' ) ); 
    276290        }, 
    277291 
     292        containFocus: function( $el ) { 
     293                $el.on( 'keydown.wp-themes', function( event ) { 
     294                        var $target; 
     295 
     296                        if ( event.which === 9 ) { 
     297                                $target = $( event.target ); 
     298 
     299                                if ( $target.is( 'button.left' ) && event.shiftKey ) { 
     300                                        $el.find( 'a.delete-theme' ).focus(); 
     301                                        event.preventDefault(); 
     302                                } else if ( $target.is( 'a.delete-theme' ) ) { 
     303                                        $el.find( 'button.left' ).focus(); 
     304                                        event.preventDefault(); 
     305                                } 
     306                        } 
     307                }); 
     308        }, 
     309 
    278310        // Single theme overlay screen 
    279311        // It's shown when clicking a theme 
    280312        collapse: function( event ) { 
     
    291323                // Detect if the click is inside the overlay 
    292324                // and don't close it unless the target was 
    293325                // the div.back button 
    294                 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) { 
     326                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) { 
    295327 
    296328                        // Add a temporary closing class while overlay fades out 
    297329                        $( 'body' ).addClass( 'closing-overlay' ); 
     
    311343 
    312344                                // Restore scroll position 
    313345                                document.body.scrollTop = scroll; 
     346 
     347                                // Return focus to the theme div 
     348                                if ( $focusedTheme ) { 
     349                                        $focusedTheme.focus(); 
     350                                } 
    314351                        }); 
    315352                } 
    316353        }, 
     
    735772        }; 
    736773 
    737774        $(window).resize(function(){ tb_position(); }); 
     775 
     776        $('.theme-browser .theme').on( 'focusin.wp-themes', function() { 
     777                $(this).addClass('hover').siblings('.hover').removeClass('hover'); 
     778        }).on( 'focusout.wp-themes blur.wp-themes', function() { 
     779                $(this).removeClass('hover'); 
     780        }); 
    738781}); 
  • src/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="" /> 
     
    200200        <?php } else { ?> 
    201201                <div class="theme-screenshot blank"></div> 
    202202        <?php } ?> 
    203         <span class="more-details"><?php _e( 'Theme Details' ); ?></span> 
     203        <button class="more-details"><?php _e( 'Theme Details' ); ?></button> 
    204204        <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div> 
    205205 
    206206        <?php if ( $theme['active'] ) { ?> 
     
    277277        <# } else { #> 
    278278                <div class="theme-screenshot blank"></div> 
    279279        <# } #> 
    280         <span class="more-details"><?php _e( 'Theme Details' ); ?></span> 
     280        <button class="more-details" tabindex="0"><?php _e( 'Theme Details' ); ?></button> 
    281281        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div> 
    282282         
    283283        <# if ( data.active ) { #> 
     
    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">