WordPress.org

Make WordPress Core

Changeset 31994


Ignore:
Timestamp:
04/03/2015 02:31:11 AM (6 years ago)
Author:
azaozz
Message:

Accessibility improvements for Themes screen: fix keyboard events and callbacks for the Search field, increase trigger timeout a bit, improve Esc. key handling.
Props joedolson, adamsilverstein, afercia, DrewAPicture. Fixes #26600.

Location:
trunk/src
Files:
6 edited

Legend:

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

    r31952 r31994  
    11391139    font-style: normal;
    11401140    margin: 0;
    1141     padding: 100px 0 0;
     1141    padding: 0;
    11421142    text-align: center;
    11431143    display: none;
  • trunk/src/wp-admin/js/theme.js

    r31690 r31994  
    8080        // Render and append
    8181        this.view.render();
    82         this.$el.find( '.themes' ).remove();
    83         this.$el.append( this.view.el ).addClass( 'rendered' );
     82        this.$el.empty().append( this.view.el ).addClass( 'rendered' );
    8483        this.$el.append( '<br class="clear"/>' );
    8584    },
     
    158157        if ( this.terms === '' ) {
    159158            this.reset( themes.data.themes );
     159            $( 'body' ).removeClass( 'no-results' );
    160160        }
    161161
     
    832832    count: $( '.wp-core-ui .theme-count' ),
    833833
     834    // The live themes count
     835    liveThemeCount: 0,
     836
    834837    initialize: function( options ) {
    835838        var self = this;
     
    855858            if ( _.isNumber( count ) ) {
    856859                self.count.text( count );
     860                self.announceSearchResults( count );
    857861            } else {
    858862                self.count.text( self.collection.length );
     863                self.announceSearchResults( self.collection.length );
    859864            }
    860865        });
     
    927932
    928933        // Display a live theme count for the collection
    929         this.count.text( this.collection.count ? this.collection.count : this.collection.length );
     934        this.liveThemeCount = this.collection.count ? this.collection.count : this.collection.length;
     935        this.count.text( this.liveThemeCount );
     936
     937        this.announceSearchResults( this.liveThemeCount );
    930938    },
    931939
     
    10791087
    10801088        }
     1089    },
     1090
     1091    // Dispatch audible search results feedback message
     1092    announceSearchResults: function( count ) {
     1093        if ( 0 === count ) {
     1094            wp.a11y.speak( l10n.noThemesFound );
     1095        } else {
     1096            wp.a11y.speak( l10n.themesFound.replace( '%d', count ) );
     1097        }
    10811098    }
    10821099});
     
    10921109    attributes: {
    10931110        placeholder: l10n.searchPlaceholder,
    1094         type: 'search'
     1111        type: 'search',
     1112        'aria-describedby': 'live-search-desc'
    10951113    },
    10961114
    10971115    events: {
    1098         'input':  'search',
    1099         'keyup':  'search',
    1100         'change': 'search',
    1101         'search': 'search',
    1102         'blur':   'pushState'
     1116        'input': 'search',
     1117        'keyup': 'search',
     1118        'blur': 'pushState'
    11031119    },
    11041120
     
    11131129    },
    11141130
    1115     // Runs a search on the theme collection.
    11161131    search: function( event ) {
    1117         var options = {};
    1118 
    11191132        // Clear on escape.
    11201133        if ( event.type === 'keyup' && event.which === 27 ) {
     
    11221135        }
    11231136
    1124         // Lose input focus when pressing enter
    1125         if ( event.which === 13 ) {
    1126             this.$el.trigger( 'blur' );
    1127         }
     1137        /**
     1138         * Since doSearch is debounced, it will only run when user input comes to a rest
     1139         */
     1140        this.doSearch( event );
     1141    },
     1142
     1143    // Runs a search on the theme collection.
     1144    doSearch: _.debounce( function( event ) {
     1145        var options = {};
    11281146
    11291147        this.collection.doSearch( event.target.value );
     
    11421160            themes.router.navigate( themes.router.baseUrl( '' ) );
    11431161        }
    1144     },
     1162    }, 500 ),
    11451163
    11461164    pushState: function( event ) {
     
    12531271
    12541272    events: {
     1273        'input': 'search',
    12551274        'keyup': 'search'
    12561275    },
     
    13061325        // Set route
    13071326        themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } );
    1308     }, 300 )
     1327    }, 500 )
    13091328});
    13101329
  • trunk/src/wp-admin/theme-install.php

    r31704 r31994  
    4545    'l10n' => array(
    4646        'addNew' => __( 'Add New Theme' ),
    47         'search'  => __( 'Search Themes' ),
     47        'search' => __( 'Search Themes' ),
    4848        'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
    4949        'upload' => __( 'Upload Theme' ),
    5050        'back'   => __( 'Back' ),
    51         'error'  => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' )
     51        'error'  => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ),
     52        'themesFound'   => __( 'Number of Themes found: %d' ),
     53        'noThemesFound' => __( 'No themes found. Try a different search.' ),
    5254    ),
    5355    'installedThemes' => array_keys( $installed_themes ),
     
    7173$help_overview =
    7274    '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'https://wordpress.org/themes/') . '</p>' .
    73     '<p>' . __('You can Search for themes by keyword, author, or tag, or can get more specific and search by criteria listed in the feature filter. Alternately, you can browse the themes that are Featured, Popular, or Latest. When you find a theme you like, you can preview it or install it.') . '</p>' .
     75    '<p>' . __( 'You can Search for themes by keyword, author, or tag, or can get more specific and search by criteria listed in the feature filter.' ) . ' <span id="live-search-desc">' . __( 'The search results will be updated as you type.' ) . '</span></p>' .
     76    '<p>' . __( 'Alternately, you can browse the themes that are Featured, Popular, or Latest. When you find a theme you like, you can preview it or install it.' ) . '</p>' .
    7477    '<p>' . __('You can Upload a theme manually if you have already downloaded its ZIP archive onto your computer (make sure it is from a trusted and original source). You can also do it the old-fashioned way and copy a downloaded theme&#8217;s folder via FTP into your <code>/wp-content/themes</code> directory.') . '</p>';
    7578
     
    167170        </div>
    168171    </div>
    169     <div class="theme-browser content-filterable" aria-live="polite">
    170         <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    171     </div>
     172    <div class="theme-browser content-filterable"></div>
    172173    <div class="theme-install-overlay wp-full-overlay expanded"></div>
     174
     175    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    173176    <span class="spinner"></span>
    174177
  • trunk/src/wp-admin/themes.php

    r31973 r31994  
    4848        '<li>' . __( 'Click on the theme to see the theme name, version, author, description, tags, and the Delete link' ) . '</li>' .
    4949        '<li>' . __( 'Click Customize for the current theme or Live Preview for any other theme to see a live preview' ) . '</li></ul>' .
    50         '<p>' . __( 'The current theme is displayed highlighted as the first theme.' ) . '</p>';
     50        '<p>' . __( 'The current theme is displayed highlighted as the first theme.' ) . '</p>' .
     51        '<p>' . __( 'The search for installed themes will search for terms in their name, description, author, or tag.' ) . ' <span id="live-search-desc">' . __( 'The search results will be updated as you type.' ) . '</span></p>';
    5152
    5253    get_current_screen()->add_help_tab( array(
     
    108109    ),
    109110    'l10n' => array(
    110         'addNew' => __( 'Add New Theme' ),
    111         'search'  => __( 'Search Installed Themes' ),
     111        'addNew'            => __( 'Add New Theme' ),
     112        'search'            => __( 'Search Installed Themes' ),
    112113        'searchPlaceholder' => __( 'Search installed themes...' ), // placeholder (no ellipsis)
     114        'themesFound'       => __( 'Number of Themes found: %d' ),
     115        'noThemesFound'     => __( 'No themes found. Try a different search.' ),
    113116    ),
    114117) );
     
    199202?>
    200203
    201 <div class="theme-browser" aria-live="polite">
     204<div class="theme-browser">
    202205    <div class="themes">
    203206
     
    256259    <br class="clear" />
    257260    </div>
    258     <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    259261</div>
    260262<div class="theme-overlay"></div>
     263
     264<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    261265
    262266<?php
  • trunk/src/wp-admin/update.php

    r30649 r31994  
    202202            wp_die( __( 'You do not have sufficient permissions to install themes on this site.' ) );
    203203
    204         include_once( ABSPATH . 'wp-admin/includes/theme-install.php' ); //for themes_api..
     204        include_once( ABSPATH . 'wp-admin/includes/class-wp-upgrader.php' ); //for themes_api..
    205205
    206206        check_admin_referer( 'install-theme_' . $theme );
  • trunk/src/wp-includes/script-loader.php

    r31992 r31994  
    501501        $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
    502502
    503         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
     503        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
    504504
    505505        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
Note: See TracChangeset for help on using the changeset viewer.