WordPress.org

Make WordPress Core

Changeset 26956


Ignore:
Timestamp:
01/15/14 08:28:04 (4 years ago)
Author:
nacin
Message:

Keyboard navigation friendliness for themes.php.

Merges [26922] to the 3.8 branch.

props matveb, azaozz, jorbin.
fixes #26527.

Location:
branches/3.8
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/3.8

  • branches/3.8/src/wp-admin/css/wp-admin.css

    r26954 r26956  
    64956495    transition:         opacity 0.1s ease-in-out; 
    64966496} 
     6497.theme-browser .theme:focus { 
     6498    outline: 1px dotted #222; 
     6499} 
     6500/* Hide shortcut actions and hover feedback when using tab navigation */ 
     6501.theme-browser .theme:focus .theme-actions { 
     6502    display: none; 
     6503} 
     6504/* Restore display of theme controls if you hover a focused theme */ 
     6505.theme-browser .theme:focus:hover .theme-actions { 
     6506    display: block; 
     6507} 
     6508.theme-browser .theme:focus .more-details { 
     6509    opacity: 1; 
     6510} 
     6511/* Current theme needs to have its action always on view */ 
     6512.theme-browser .theme.active:focus .theme-actions { 
     6513    display: block; 
     6514} 
    64976515 
    64986516.theme-browser.rendered .theme:hover .more-details { 
     
    67206738    text-align: center; 
    67216739    float: right; 
     6740    border: 0; 
    67226741    border-left: 1px solid #ddd; 
    6723 } 
    6724  
    6725 .theme-overlay .theme-header .close:hover:before { 
     6742    background-color: transparent; 
     6743} 
     6744 
     6745.theme-overlay .theme-header .close:hover:before, 
     6746.theme-overlay .theme-header .close:focus:before { 
    67266747    color: #fff; 
    67276748} 
     
    67406761    cursor: pointer; 
    67416762    color: #777; 
     6763    background-color: transparent; 
    67426764    height: 48px; 
    67436765    width: 54px; 
    67446766    float: left; 
    67456767    text-align: center; 
     6768    border: 0; 
    67466769    border-right: 1px solid #ddd; 
    6747     -webkit-user-select: none; 
    6748     -moz-user-select:    none; 
    6749     -ms-user-select:     none; 
    6750     user-select:         none; 
    67516770} 
    67526771 
    67536772.theme-overlay .theme-header .close:hover, 
    67546773.theme-overlay .theme-header .right:hover, 
    6755 .theme-overlay .theme-header .left:hover { 
     6774.theme-overlay .theme-header .left:hover, 
     6775.theme-overlay .theme-header .close:focus, 
     6776.theme-overlay .theme-header .right:focus, 
     6777.theme-overlay .theme-header .left:focus { 
    67566778    background: #0074a2; 
    67576779    color: #fff; 
     
    68626884} 
    68636885 
    6864 .theme-overlay .theme-actions .delete-theme:hover { 
     6886.theme-overlay .theme-actions .delete-theme:hover, 
     6887.theme-overlay .theme-actions .delete-theme:focus { 
    68656888    background: #d54e21; 
    68666889    color: #fff; 
  • branches/3.8/src/wp-admin/js/theme.js

    r26936 r26956  
    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        } 
  • branches/3.8/src/wp-admin/themes.php

    r26853 r26956  
    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.