WordPress.org

Make WordPress Core

Ticket #26527: 26527.4.diff

File 26527.4.diff, 6.4 KB (added by matveb, 6 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                // 'enter' and 'space' keys expand the details view when a theme is :focused
     225                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
     226                        return;
     227                }
     228
    222229                // Bail if the user scrolled on a touch device
    223230                if ( this.touchDrag === true ) {
    224231                        return this.touchDrag = false;
     
    232239                        return;
    233240                }
    234241
     242                themes.focusedTheme = this.$el;
    235243                this.trigger( 'theme:expand', self.model.cid );
    236244        },
    237245
     
    266274                this.navigation();
    267275                // Checks screenshot size
    268276                this.screenshotCheck( this.$el );
     277                // Contain "tabbing" inside the overlay
     278                this.containFocus( this.$el );
     279
     280                // Move focus to the default action
     281                window.setTimeout( function() {
     282                        $( '.theme-wrap a.button-primary:visible' ).focus();
     283                }, 500 )
    269284        },
    270285
    271286        // Adds a class to the currently active theme
     
    275290                this.$el.toggleClass( 'active', this.model.get( 'active' ) );
    276291        },
    277292
     293        containFocus: function( $el ) {
     294                $el.on( 'keydown.wp-themes', function( event ) {
     295                        var $target;
     296
     297                        if ( event.which === 9 ) {
     298                                $target = $( event.target );
     299
     300                                if ( $target.is( 'button.left' ) && event.shiftKey ) {
     301                                        $el.find( 'a.delete-theme' ).focus();
     302                                        event.preventDefault();
     303                                } else if ( $target.is( 'a.delete-theme' ) ) {
     304                                        $el.find( 'button.left' ).focus();
     305                                        event.preventDefault();
     306                                }
     307                        }
     308                });
     309        },
     310
    278311        // Single theme overlay screen
    279312        // It's shown when clicking a theme
    280313        collapse: function( event ) {
     
    291324                // Detect if the click is inside the overlay
    292325                // and don't close it unless the target was
    293326                // the div.back button
    294                 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
     327                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
    295328
    296329                        // Add a temporary closing class while overlay fades out
    297330                        $( 'body' ).addClass( 'closing-overlay' );
     
    311344
    312345                                // Restore scroll position
    313346                                document.body.scrollTop = scroll;
     347
     348                                // Return focus to the theme div
     349                                if ( themes.focusedTheme ) {
     350                                        themes.focusedTheme.focus();
     351                                }
    314352                        });
    315353                }
    316354        },
  • 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 #000;
     6491}
     6492/* Hide shortcut actions and hover feedback when using tab navigation */
     6493.theme-browser .theme:focus .theme-actions,
     6494.theme-browser .theme:focus .more-details {
     6495        display: none;
     6496}
     6497/* Restore display of theme controls if you hover a focused theme */
     6498.theme-browser .theme:focus:hover .theme-actions,
     6499.theme-browser .theme:focus:hover .more-details {
     6500        display: block;
     6501}
     6502/* Current theme needs to have its action always on view */
     6503.theme-browser .theme.active:focus .theme-actions {
     6504        display: block;
     6505}
    64896506
    64906507.theme-browser.rendered .theme:hover .more-details {
    64916508        opacity: 1;
     
    67116728        width: 50px;
    67126729        text-align: center;
    67136730        float: right;
     6731        border: 0;
    67146732        border-left: 1px solid #ddd;
     6733        background-color: transparent;
    67156734}
    67166735
    6717 .theme-overlay .theme-header .close:hover:before {
     6736.theme-overlay .theme-header .close:hover:before,
     6737.theme-overlay .theme-header .close:focus:before {
    67186738        color: #fff;
    67196739}
    67206740
     
    67316751.theme-overlay .theme-header .left {
    67326752        cursor: pointer;
    67336753        color: #777;
     6754        background-color: transparent;
    67346755        height: 48px;
    67356756        width: 54px;
    67366757        float: left;
    67376758        text-align: center;
     6759        border: 0;
    67386760        border-right: 1px solid #ddd;
    6739         -webkit-user-select: none;
    6740         -moz-user-select:    none;
    6741         -ms-user-select:     none;
    6742         user-select:         none;
    67436761}
    67446762
    67456763.theme-overlay .theme-header .close:hover,
    67466764.theme-overlay .theme-header .right:hover,
    6747 .theme-overlay .theme-header .left:hover {
     6765.theme-overlay .theme-header .left:hover,
     6766.theme-overlay .theme-header .close:focus,
     6767.theme-overlay .theme-header .right:focus,
     6768.theme-overlay .theme-header .left:focus {
    67486769        background: #0074a2;
    67496770        color: #fff;
    67506771}
  • 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">