Make WordPress Core

Changeset 26922


Ignore:
Timestamp:
01/08/2014 09:34:03 PM (11 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.