WordPress.org

Make WordPress Core

Changeset 26922


Ignore:
Timestamp:
01/08/14 21:34:03 (4 years ago)
Author:
nacin
Message:

Keyboard navigation friendliness for themes.php.

props matveb, azaozz, jorbin.
see #26527.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26919 r26922  
    64666466    transition:         opacity 0.1s ease-in-out; 
    64676467} 
     6468.theme-browser .theme:focus { 
     6469    outline: 1px dotted #222; 
     6470} 
     6471/* Hide shortcut actions and hover feedback when using tab navigation */ 
     6472.theme-browser .theme:focus .theme-actions { 
     6473    display: none; 
     6474} 
     6475/* Restore display of theme controls if you hover a focused theme */ 
     6476.theme-browser .theme:focus:hover .theme-actions { 
     6477    display: block; 
     6478} 
     6479.theme-browser .theme:focus .more-details { 
     6480    opacity: 1; 
     6481} 
     6482/* Current theme needs to have its action always on view */ 
     6483.theme-browser .theme.active:focus .theme-actions { 
     6484    display: block; 
     6485} 
    64686486 
    64696487.theme-browser.rendered .theme:hover .more-details { 
     
    66916709    text-align: center; 
    66926710    float: right; 
     6711    border: 0; 
    66936712    border-left: 1px solid #ddd; 
    6694 } 
    6695  
    6696 .theme-overlay .theme-header .close:hover:before { 
     6713    background-color: transparent; 
     6714} 
     6715 
     6716.theme-overlay .theme-header .close:hover:before, 
     6717.theme-overlay .theme-header .close:focus:before { 
    66976718    color: #fff; 
    66986719} 
     
    67116732    cursor: pointer; 
    67126733    color: #777; 
     6734    background-color: transparent; 
    67136735    height: 48px; 
    67146736    width: 54px; 
    67156737    float: left; 
    67166738    text-align: center; 
     6739    border: 0; 
    67176740    border-right: 1px solid #ddd; 
    6718     -webkit-user-select: none; 
    6719     -moz-user-select:    none; 
    6720     -ms-user-select:     none; 
    6721     user-select:         none; 
    67226741} 
    67236742 
    67246743.theme-overlay .theme-header .close:hover, 
    67256744.theme-overlay .theme-header .right:hover, 
    6726 .theme-overlay .theme-header .left:hover { 
     6745.theme-overlay .theme-header .left:hover, 
     6746.theme-overlay .theme-header .close:focus, 
     6747.theme-overlay .theme-header .right:focus, 
     6748.theme-overlay .theme-header .left:focus { 
    67276749    background: #0074a2; 
    67286750    color: #fff; 
     
    68336855} 
    68346856 
    6835 .theme-overlay .theme-actions .delete-theme:hover { 
     6857.theme-overlay .theme-actions .delete-theme:hover, 
     6858.theme-overlay .theme-actions .delete-theme:focus { 
    68366859    background: #d54e21; 
    68376860    color: #fff; 
  • trunk/src/wp-admin/js/theme.js

    r26921 r26922  
    189189    events: { 
    190190        'click': 'expand', 
     191        'keydown': 'expand', 
    191192        'touchend': 'expand', 
    192193        'touchmove': 'preventExpand' 
     
    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(); 
     
    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        } 
    226  
    227         event = event || window.event; 
    228235 
    229236        // Prevent the modal from showing when the user clicks 
     
    232239            return; 
    233240        } 
     241 
     242        // Set focused theme to current element 
     243        themes.focusedTheme = this.$el; 
    234244 
    235245        this.trigger( 'theme:expand', self.model.cid ); 
     
    267277        // Checks screenshot size 
    268278        this.screenshotCheck( this.$el ); 
     279        // Contain "tabbing" inside the overlay 
     280        this.containFocus( this.$el ); 
    269281    }, 
    270282 
     
    276288    }, 
    277289 
     290    // Keeps :focus within the theme details elements 
     291    containFocus: function( $el ) { 
     292        var $target; 
     293 
     294        // Move focus to the primary action 
     295        _.delay( function() { 
     296            $( '.theme-wrap a.button-primary:visible' ).focus(); 
     297        }, 500 ); 
     298 
     299        $el.on( 'keydown.wp-themes', function( event ) { 
     300 
     301            // Tab key 
     302            if ( event.which === 9 ) { 
     303                $target = $( event.target ); 
     304 
     305                // Keep focus within the overlay by making the last link on theme actions 
     306                // switch focus to button.left on tabbing and vice versa 
     307                if ( $target.is( 'button.left' ) && event.shiftKey ) { 
     308                    $el.find( '.theme-actions a:last-child' ).focus(); 
     309                    event.preventDefault(); 
     310                } else if ( $target.is( '.theme-actions a:last-child' ) ) { 
     311                    $el.find( 'button.left' ).focus(); 
     312                    event.preventDefault(); 
     313                } 
     314            } 
     315        }); 
     316    }, 
     317 
    278318    // Single theme overlay screen 
    279319    // It's shown when clicking a theme 
     
    292332        // and don't close it unless the target was 
    293333        // the div.back button 
    294         if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) { 
     334        if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) { 
    295335 
    296336            // Add a temporary closing class while overlay fades out 
     
    312352                // Restore scroll position 
    313353                document.body.scrollTop = scroll; 
     354 
     355                // Return focus to the theme div 
     356                if ( themes.focusedTheme ) { 
     357                    themes.focusedTheme.focus(); 
     358                } 
    314359            }); 
    315360        } 
  • trunk/src/wp-admin/themes.php

    r26853 r26922  
    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"> 
     
    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"> 
Note: See TracChangeset for help on using the changeset viewer.