Make WordPress Core

Changeset 37742


Ignore:
Timestamp:
06/17/2016 08:46:08 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Theme Installer, make the "Upload Theme" button... a button.

UI controls that "do something" on a page shouldn't be links. This link behaves
like a toggle to expand the uploader panel and should be a button element with
an aria-expanded attribute. Also:

  • improves consistency with the Plugin uploader
  • keeps the themes list visible when the uploader is open
  • displays a notice when JavaScript is off
  • adds some hide-if-no-js CSS classes
  • removes the themes.router.navigate() "upload" route: seems unnecessary and breaks history

Fixes #35457.

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

Legend:

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

    r37740 r37742  
    602602    font-weight: 600;
    603603    font-size: 13px;
     604    line-height: normal; /* IE8-IE11 need this for buttons */
     605    cursor: pointer;
     606    outline: 0;
    604607}
    605608
  • trunk/src/wp-admin/css/themes.css

    r37740 r37742  
    10401040    display: none;
    10411041    margin: 0;
    1042     padding: 0;
     1042    padding: 50px 0;
    10431043    width: 100%;
    10441044    overflow: hidden;
     
    10671067    font-style: normal;
    10681068    margin: 0;
    1069     padding: 40px 0 0;
     1069    padding: 0;
    10701070    text-align: center;
    1071 }
    1072 body.show-upload-theme .upload-theme + .wp-filter,
    1073 body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
    1074     display: none;
    10751071}
    10761072
     
    10861082}
    10871083
    1088 body.no-results p.no-themes {
    1089     display: block;
    1090 }
    1091 
    1092 body.show-upload-theme p.no-themes {
    1093     display: none !important;
     1084.no-results p.no-themes {
     1085    display: block;
    10941086}
    10951087
  • trunk/src/wp-admin/js/theme.js

    r37714 r37742  
    17461746
    17471747    /*
    1748      * When a user presses the "Upload Theme" button, show the upload form in place.
    1749      * @todo consider to abstract this in a generic, reusable, utility, see plugin-install.js
     1748     * When users press the "Upload Theme" button, show the upload form in place.
    17501749     */
    17511750    uploader: function() {
     
    17531752            $body = $( document.body );
    17541753
    1755         uploadViewToggle
    1756             .attr({
    1757                 role: 'button',
    1758                 'aria-expanded': 'false'
    1759             })
    1760             .on( 'click', function( event ) {
    1761                 event.preventDefault();
    1762                 $body.toggleClass( 'show-upload-view' );
    1763                 uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
    1764             });
     1754        uploadViewToggle.on( 'click', function() {
     1755            // Toggle the upload view.
     1756            $body.toggleClass( 'show-upload-view' );
     1757            // Toggle the `aria-expanded` button attribute.
     1758            uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
     1759        });
    17651760    },
    17661761
     
    18161811        'theme-install.php?theme=:slug': 'preview',
    18171812        'theme-install.php?browse=:sort': 'sort',
    1818         'theme-install.php?upload': 'upload',
    18191813        'theme-install.php?search=:query': 'search',
    18201814        'theme-install.php': 'sort'
     
    18961890            self.view.sort( sort );
    18971891            self.view.trigger( 'theme:close' );
    1898         });
    1899 
    1900         // Support the `upload` route by going straight to upload section
    1901         themes.router.on( 'route:upload', function() {
    1902             $( 'a.upload' ).trigger( 'click' );
    19031892        });
    19041893
  • trunk/src/wp-admin/theme-install.php

    r37714 r37742  
    128128    $tabs = apply_filters( 'install_themes_tabs', array( 'upload' => __( 'Upload Theme' ) ) );
    129129    if ( ! empty( $tabs['upload'] ) && current_user_can( 'upload_themes' ) ) {
    130         echo ' <a href="#" class="upload-view-toggle page-title-action">' . __( 'Upload Theme' ) . '</a>';
     130        echo ' <button type="button" class="upload-view-toggle page-title-action hide-if-no-js" aria-expanded="false">' . __( 'Upload Theme' ) . '</button>';
    131131    }
    132132    ?></h1>
     133    <div class="error hide-if-js">
     134        <p><?php _e( 'The Theme Installer screen requires JavaScript.' ); ?></p>
     135    </div>
    133136
    134137    <div class="upload-theme">
     
    136139    </div>
    137140
    138     <h2 class="screen-reader-text"><?php _e( 'Filter themes list' ); ?></h2>
    139 
    140     <div class="wp-filter">
     141    <h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Filter themes list' ); ?></h2>
     142
     143    <div class="wp-filter hide-if-no-js">
    141144        <div class="filter-count">
    142145            <span class="count theme-count"></span>
     
    202205        </div>
    203206    </div>
    204     <h2 class="screen-reader-text"><?php _e( 'Themes list' ); ?></h2>
     207    <h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Themes list' ); ?></h2>
    205208    <div class="theme-browser content-filterable"></div>
    206209    <div class="theme-install-overlay wp-full-overlay expanded"></div>
Note: See TracChangeset for help on using the changeset viewer.