WordPress.org
Get WordPress

Make WordPress Core

Changeset 38640


Ignore:
Timestamp:
09/21/2016 05:53:29 PM (8 years ago)
Author:
afercia
Message:

Accessibility: Add Themes Feature Filter form improvements.

  • adds "Apply Filters" and "Clear" at the end of the form
  • changes the "Feature Filter", "Apply Filters", "Clear", and "Edit" links in <button> elements
  • removes a leftover from [27963]
  • clarifies one button text and adds an aria-label attribute
  • adds a wp.a11y.speak() message when clicking on "Apply Filters" and no features are selected

Fixes #38086.

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

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r38617 r38640  
    10461046}
    10471047
    1048 .wp-filter .drawer-toggle {
    1049     display: inline-block;
    1050     margin: 0 10px;
    1051     padding: 4px 6px;
     1048.wp-filter .button.drawer-toggle {
     1049    margin: 10px 9px 0;
     1050    padding: 0 10px 0 6px;
     1051    border-color: transparent;
     1052    background-color: transparent;
    10521053    color: #666;
    1053     cursor: pointer;
     1054    vertical-align: baseline;
     1055    -webkit-box-shadow: none;
     1056    box-shadow: none;
    10541057}
    10551058
    10561059.wp-filter .drawer-toggle:before {
    1057     display: inline-block;
    1058     vertical-align: top;
    10591060    content: "\f111";
    10601061    margin: 0 5px 0 0;
    1061     width: 16px;
    1062     height: 16px;
    10631062    color: #72777c;
    1064     -webkit-transition: color .1s ease-in 0;
    1065     transition: color .1s ease-in 0;
    1066     font-family: dashicons;
    1067     font-size: 16px;
    1068     line-height: 1;
    1069     text-align: center;
    1070     text-decoration: inherit;
    1071     font-weight: 400;
    1072     font-style: normal;
     1063    font: normal 16px/1 dashicons;
     1064    vertical-align: text-bottom;
    10731065    -webkit-font-smoothing: antialiased;
    1074 }
    1075 
    1076 .wp-filter .drawer-toggle:hover,
    1077 .wp-filter .drawer-toggle:hover:before {
     1066    -moz-osx-font-smoothing: grayscale;
     1067}
     1068
     1069.wp-filter .button.drawer-toggle:hover,
     1070.wp-filter .drawer-toggle:hover:before,
     1071.wp-filter .button.drawer-toggle:focus,
     1072.wp-filter .drawer-toggle:focus:before {
     1073    background-color: transparent;
    10781074    color: #00a0d2;
     1075}
     1076
     1077.wp-filter .button.drawer-toggle:hover,
     1078.wp-filter .button.drawer-toggle:focus:active {
     1079    border-color: transparent;
     1080}
     1081
     1082.wp-filter .button.drawer-toggle:focus {
     1083    border-color: #5b9dd9;
     1084}
     1085
     1086.wp-filter .button.drawer-toggle:active {
     1087    background: transparent;
     1088    -webkit-box-shadow: none;
     1089    box-shadow: none;
     1090    -webkit-transform: none;
     1091    -ms-transform: none;
     1092    transform: none;
    10791093}
    10801094
    … …  
    10931107}
    10941108
    1095 .show-favorites-form .wp-filter .favorites-form {
     1109.show-favorites-form .favorites-form {
    10961110    display: block;
    10971111}
    … …  
    11111125}
    11121126
     1127.show-filters .filter-links a.current {
     1128    border-bottom: none;
     1129}
     1130
     1131.show-filters .wp-filter .button.drawer-toggle {
     1132    -webkit-border-radius: 2px;
     1133    border-radius: 2px;
     1134    background: #72777c;
     1135    color: #fff;
     1136}
     1137
    11131138.show-filters .wp-filter .drawer-toggle:hover,
    11141139.show-filters .wp-filter .drawer-toggle:focus {
    11151140    background: rgb(46, 162, 204);
    1116 }
    1117 
    1118 .show-filters .filter-links a.current {
    1119     border-bottom: none;
    1120 }
    1121 
    1122 .show-filters .wp-filter .drawer-toggle {
    1123     -webkit-border-radius: 2px;
    1124     border-radius: 2px;
    1125     border: none;
    1126     background: #72777c;
    1127     color: #fff;
    11281141}
    11291142
    … …  
    11711184
    11721185.filter-drawer .buttons {
     1186    clear: both;
    11731187    margin-bottom: 20px;
     1188}
     1189
     1190.filter-drawer .filter-group + .buttons {
     1191    margin-bottom: 0;
     1192    padding-top: 20px;
    11741193}
    11751194
    … …  
    11841203    display: none;
    11851204    margin-left: 10px;
     1205}
     1206
     1207.wp-filter .button-link.edit-filters {
     1208    color: #0073aa;
     1209    text-decoration: underline;
     1210    padding: 0 5px;
     1211    line-height: 28px;
     1212}
     1213
     1214.wp-filter .button-link.edit-filters:hover {
     1215    color: #00a0d2;
     1216}
     1217
     1218.wp-filter .button-link.edit-filters:focus {
     1219    color: #124964;
    11861220}
    11871221
    … …  
    12271261}
    12281262
     1263.show-filters .favorites-form,
    12291264.show-filters .content-filterable,
    12301265.show-filters.filters-applied.loading-content .content-filterable,
    … …  
    37223757        line-height: 25px;
    37233758    }
     3759
     3760    .wp-filter .button.drawer-toggle {
     3761        font-size: 13px;
     3762        line-height: 26px;
     3763        height: 28px;
     3764    }
    37243765}
    37253766

  • trunk/src/wp-admin/js/theme.js

    r38520 r38640  
    15241524        $( '.filter-links li > a.current' ).removeClass( 'current' );
    15251525        $( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
     1526        $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
    15261527
    15271528        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    … …  
    15461547        'click .filter-group [type="checkbox"]': 'addFilter',
    15471548        'click .filter-drawer .clear-filters': 'clearFilters',
    1548         'click .filtered-by': 'backToFilters',
     1549        'click .edit-filters': 'backToFilters',
    15491550        'click .favorites-form-submit' : 'saveUsername',
    15501551        'keyup #wporg-username-input': 'saveUsername'
    … …  
    16221623
    16231624        $( 'body' ).removeClass( 'filters-applied show-filters' );
     1625        $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
    16241626
    16251627        // Bail if this is already active
    … …  
    16411643
    16421644        if ( 'favorites' === sort ) {
    1643             $ ( 'body' ).addClass( 'show-favorites-form' );
     1645            $( 'body' ).addClass( 'show-favorites-form' );
    16441646        } else {
    1645             $ ( 'body' ).removeClass( 'show-favorites-form' );
     1647            $( 'body' ).removeClass( 'show-favorites-form' );
    16461648        }
    16471649
    … …  
    16911693        if ( event ) {
    16921694            event.preventDefault();
     1695        }
     1696
     1697        if ( ! tags ) {
     1698            wp.a11y.speak( l10n.selectFeatureFilter );
     1699            return;
    16931700        }
    16941701
    … …  
    17831790    // Toggle the full filters navigation
    17841791    moreFilters: function( event ) {
     1792        var $body = $( 'body' ),
     1793            $toggleButton = $( '.drawer-toggle' );
     1794
    17851795        event.preventDefault();
    17861796
    1787         if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1797        if ( $body.hasClass( 'filters-applied' ) ) {
    17881798            return this.backToFilters();
    17891799        }
    17901800
    1791         // If the filters section is opened and filters are checked
    1792         // run the relevant query collapsing to filtered-by state
    1793         if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
    1794             return this.addFilter();
    1795         }
    1796 
    17971801        this.clearSearch();
    17981802
    17991803        themes.router.navigate( themes.router.baseUrl( '' ) );
    1800         $( 'body' ).toggleClass( 'show-filters' );
     1804        // Toggle the feature filters view.
     1805        $body.toggleClass( 'show-filters' );
     1806        // Toggle the `aria-expanded` button attribute.
     1807        $toggleButton.attr( 'aria-expanded', $body.hasClass( 'show-filters' ) );
    18011808    },
    18021809

  • trunk/src/wp-admin/theme-install.php

    r38071 r38640  
    3838    'themes'   => false,
    3939    'settings' => array(
    40         'isInstall'     => true,
    41         'canInstall'    => current_user_can( 'install_themes' ),
    42         'installURI'    => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
    43         'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH )
     40        'isInstall'  => true,
     41        'canInstall' => current_user_can( 'install_themes' ),
     42        'installURI' => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
     43        'adminUrl'   => parse_url( self_admin_url(), PHP_URL_PATH )
    4444    ),
    4545    'l10n' => array(
    46         'addNew' => __( 'Add New Theme' ),
    47         'search' => __( 'Search Themes' ),
    48         'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
    49         'upload' => __( 'Upload Theme' ),
    50         '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>.' ),
    52         'themesFound'   => __( 'Number of Themes found: %d' ),
    53         'noThemesFound' => __( 'No themes found. Try a different search.' ),
    54         'collapseSidebar'    => __( 'Collapse Sidebar' ),
    55         'expandSidebar'      => __( 'Expand Sidebar' ),
     46        'addNew'              => __( 'Add New Theme' ),
     47        'search'              => __( 'Search Themes' ),
     48        'searchPlaceholder'   => __( 'Search themes...' ), // placeholder (no ellipsis)
     49        'upload'              => __( 'Upload Theme' ),
     50        '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>.' ),
     52        'themesFound'         => __( 'Number of Themes found: %d' ),
     53        'noThemesFound'       => __( 'No themes found. Try a different search.' ),
     54        'collapseSidebar'     => __( 'Collapse Sidebar' ),
     55        'expandSidebar'       => __( 'Expand Sidebar' ),
     56        /* translators: hidden accessibility text */
     57        'selectFeatureFilter' => __( 'Select one or more Theme features to filter by' ),
    5658    ),
    5759    'installedThemes' => array_keys( $installed_themes ),
    … …  
    153155        </ul>
    154156
    155         <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     157        <button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button>
    156158
    157159        <div class="search-form"></div>
    … …  
    179181        <div class="filter-drawer">
    180182            <div class="buttons">
    181                 <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
    182                 <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     183                <button type="button" class="apply-filters button"><?php _e( 'Apply Filters' ); ?><span></span></button>
     184                <button type="button" class="clear-filters button" aria-label="<?php esc_attr_e( 'Clear current filters' ); ?>"><?php _e( 'Clear' ); ?></button>
    183185            </div>
    184186        <?php
    … …  
    198200        }
    199201        ?>
     202            <div class="buttons">
     203                <button type="button" class="apply-filters button"><?php _e( 'Apply Filters' ); ?><span></span></button>
     204                <button type="button" class="clear-filters button" aria-label="<?php esc_attr_e( 'Clear current filters' ); ?>"><?php _e( 'Clear' ); ?></button>
     205            </div>
    200206            <div class="filtered-by">
    201207                <span><?php _e( 'Filtering by:' ); ?></span>
    202208                <div class="tags"></div>
    203                 <a href="#"><?php _e( 'Edit' ); ?></a>
     209                <button type="button" class="button-link edit-filters"><?php _e( 'Edit Filters' ); ?></button>
    204210            </div>
    205211        </div>
Note: See TracChangeset for help on using the changeset viewer.