Make WordPress Core

Changeset 27804


Ignore:
Timestamp:
03/28/2014 03:15:30 AM (11 years ago)
Author:
helen
Message:

Bring keyboard accessibility to the theme install screen and theme action buttons. props jorbin. see #27521.

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

Legend:

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

    r27784 r27804  
    440440body.more-filters-opened .more-filters,
    441441body.more-filters-opened .more-filters:before {
     442    color: $menu-text;
     443    background-color: $menu-background;
     444}
     445
     446body.more-filters-opened .more-filters:hover,
     447body.more-filters-opened .more-filters:focus,
     448body.more-filters-opened .more-filters:hover:before,
     449body.more-filters-opened .more-filters:focus:before {
     450    background-color: $menu-highlight-background;
    442451    color: $menu-highlight-text;
    443     background-color: $menu-highlight-background;
    444 }
     452}
     453
    445454
    446455/* jQuery UI Slider */
  • trunk/src/wp-admin/css/themes.css

    r27790 r27804  
    3939    position: relative;
    4040    top: -3px;
     41}
     42
     43.theme-navigation a {
     44    text-decoration:none;
    4145}
    4246
     
    98102}
    99103
    100 /* Activate and Customize buttons, shown on hover */
     104/* Activate and Customize buttons, shown on hover and focus */
    101105.theme-browser .theme .theme-actions {
    102106    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     
    113117}
    114118
    115 .theme-browser .theme:hover .theme-actions {
     119.theme-browser .theme:hover .theme-actions,
     120.theme-browser .theme.focus .theme-actions,
     121.theme-browser .theme:focus .theme-actions {
    116122    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    117123    opacity: 1;
     
    158164}
    159165
    160 .theme-browser .theme:hover .theme-screenshot {
     166.theme-browser .theme:hover .theme-screenshot,
     167.theme-browser .theme:focus .theme-screenshot {
    161168    background: #fff;
    162169}
    163170
    164 .theme-browser.rendered .theme:hover .theme-screenshot img {
     171.theme-browser.rendered .theme:hover .theme-screenshot img,
     172.theme-browser.rendered .theme:focus .theme-screenshot img {
    165173    opacity: 0.4;
    166174}
     
    190198    outline: 1px dotted #222;
    191199}
    192 /* Hide shortcut actions and hover feedback when using tab navigation */
    193 .theme-browser .theme:focus .theme-actions {
    194     display: none;
    195 }
    196 /* Restore display of theme controls if you hover a focused theme */
    197 .theme-browser .theme:focus:hover .theme-actions {
    198     display: block;
    199 }
     200
    200201.theme-browser .theme:focus .more-details {
    201202    opacity: 1;
     
    206207}
    207208
    208 .theme-browser.rendered .theme:hover .more-details {
     209.theme-browser.rendered .theme:hover .more-details,
     210.theme-browser.rendered .theme:focus .more-details {
    209211    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    210212    opacity: 1;
     
    360362}
    361363
    362 .theme-browser .theme.add-new-theme:hover .theme-screenshot {
     364.theme-browser .theme.add-new-theme:hover .theme-screenshot,
     365.theme-browser .theme.add-new-theme:focus .theme-screenshot {
    363366    background: none;
    364367}
    365368
    366 .theme-browser .theme.add-new-theme:hover span:after {
     369.theme-browser .theme.add-new-theme:hover span:after,
     370.theme-browser .theme.add-new-theme:focus span:after {
    367371    background: #fff;
    368372    color: #0074a2;
    369373}
    370374
    371 .theme-browser .theme.add-new-theme:hover:after {
     375.theme-browser .theme.add-new-theme:hover:after,
     376.theme-browser .theme.add-new-theme:focus:after {
    372377    border-color: transparent;
    373378    color: #fff;
     
    388393}
    389394
    390 .theme-browser .theme.add-new-theme:hover .theme-name {
     395.theme-browser .theme.add-new-theme:hover .theme-name,
     396.theme-browser .theme.add-new-theme:focus .theme-name {
    391397    color: #fff;
    392398    z-index: 2;
     
    955961
    956962    .theme:not(.active):hover .theme-actions,
    957     .theme:hover .more-details {
     963    .theme:not(.active):focus .theme-actions,
     964    .theme:hover .more-details,
     965    .theme:focus .more-details {
    958966        display: none;
    959967    }
    960968
    961     .theme-browser.rendered .theme:hover .theme-screenshot img {
     969    .theme-browser.rendered .theme:hover .theme-screenshot img,
     970    .theme-browser.rendered .theme:focus .theme-screenshot img {
    962971        opacity: 1.0;
    963972    }
     
    11641173body.more-filters-opened .more-filters,
    11651174body.more-filters-opened .more-filters:before {
    1166     background: rgb(46, 162, 204);
     1175    background: #777;
    11671176    -webkit-border-radius: 2px;
    11681177    border-radius: 2px;
    11691178    border: none;
    11701179    color: #fff;
    1171 }
     1180    -webkit-transition: color .1s ease-in, background .1s ease-in;
     1181    transition: color .1s ease-in, background .1s ease-in;
     1182}
     1183
     1184body.more-filters-opened .more-filters:hover,
     1185body.more-filters-opened .more-filters:focus,
     1186body.more-filters-opened .more-filters:hover:before,
     1187body.more-filters-opened .more-filters:focus:before {
     1188    background: rgb(46, 162, 204);
     1189}
     1190
    11721191.theme-install-php .theme-search {
    11731192    position: absolute;
  • trunk/src/wp-admin/js/theme.js

    r27744 r27804  
    236236        'keydown': themes.isInstall ? 'preview': 'expand',
    237237        'touchend': themes.isInstall ? 'preview': 'expand',
     238        'keyup': 'addFocus',
    238239        'touchmove': 'preventExpand'
    239240    },
     
    265266    },
    266267
     268    // Add class of focus to the theme we are focused on.
     269    addFocus: function() {
     270        var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');
     271
     272        $('.theme.focus').removeClass('focus');
     273        $themeToFocus.addClass('focus');
     274    },
     275
    267276    // Single theme overlay screen
    268277    // It's shown when clicking a theme
     
    302311        if ( this.touchDrag === true ) {
    303312            return this.touchDrag = false;
     313        }
     314
     315        // 'enter' and 'space' keys expand the details view when a theme is :focused
     316        if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
     317            return;
     318        }
     319
     320        // pressing enter while focused on the buttons shouldn't open the preview
     321        if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
     322            return;
    304323        }
    305324
     
    933952    // Handles Ajax request for searching through themes in public repo
    934953    search: function( event ) {
     954
     955        // Tabbing or reverse tabbing into the search input shouldn't trigger a search
     956        if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
     957            return;
     958        }
     959
    935960        this.collection = this.options.parent.view.collection;
    936961
     
    10861111            sort = $el.data( 'sort' );
    10871112
     1113        event.preventDefault();
     1114
    10881115        // Bail if this is already active
    10891116        if ( $el.hasClass( this.activeClass ) ) {
  • trunk/src/wp-admin/theme-install.php

    r27646 r27804  
    105105    <h2>
    106106        <?php echo esc_html( $title ); ?>
    107         <a class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
    108         <a class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
     107        <a href="#" class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
     108        <a href="#" class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
    109109    </h2>
    110110
     
    115115    <div class="theme-navigation">
    116116        <span class="theme-count"></span>
    117         <span class="theme-section current" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></span>
    118         <span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
    119         <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
     117        <a class="theme-section current" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
     118        <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
     119        <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
    120120        <div class="theme-top-filters">
    121121            <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
    122122            <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
    123             <span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
     123            <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
    124124        </div>
    125125        <div class="more-filters-container">
Note: See TracChangeset for help on using the changeset viewer.