Make WordPress Core

Changeset 26956


Ignore:
Timestamp:
01/15/2014 08:28:04 AM (11 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.