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