WordPress.org
Get WordPress

Make WordPress Core

Changeset 36379


Ignore:
Timestamp:
01/22/2016 02:25:58 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Remove title attributes from the Menus screen.

Also, adds missing labels and improves the existing ones.
Updates the "custom links" labels and inputs in the Customizer too.
Introduces a generic, reusable, .wp-initial-focus CSS class to be used for
the sole purpose of setting the initial focus.
"Quick Search": uniform the attached events and avoids new AJAX requests to
be triggered when the pressed key doesn't change the searched term.

Fixes #35374.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/nav-menus.css

    r36264 r36379  
    6060#wpbody {
    6161    position: relative;
    62 }
    63 
    64 .blank-slate .menu-name {
    65     height: 2em;
    6662}
    6763
    … …  
    180176
    181177#nav-menu-header .menu-name-label {
    182     margin-top: 4px;
     178    display: inline-block;
     179    vertical-align: middle;
     180    margin-right: 7px;
     181    font-style: italic;
    183182}
    184183
    … …  
    249248}
    250249
    251 #wpbody .open-label {
    252     display: block;
    253     float:left;
    254 }
    255 
    256 #wpbody .open-label span {
    257     padding-right: 10px;
    258 }
    259 
    260 .js .input-with-default-title {
    261     color: #a0a5aa;
    262     font-style: italic;
    263 }
    264 
    265250#menu-management .inside {
    266251    padding: 0 10px;
    … …  
    269254/* Add Menu Item Boxes */
    270255.postbox .howto input,
    271 .accordion-container .howto input {
     256.customlinkdiv .menu-item-textbox {
    272257    width: 180px;
    273258    float: right;
    … …  
    276261.accordion-container .outer-border {
    277262    margin: 0;
    278 }
    279 
    280 .customlinkdiv .howto input {
    281     width: 180px;
    282263}
    283264
    … …  
    356337#menu-name {
    357338    width: 270px;
     339    vertical-align: middle;
    358340}
    359341
    … …  
    382364}
    383365
     366.customlinkdiv label,
    384367.nav-menus-php .howto span {
     368    float: left;
    385369    margin-top: 6px;
    386     display: block;
    387     float: left;
    388370}
    389371
    … …  
    732714.nav-menus-php .major-publishing-actions {
    733715    clear: both;
    734     padding: 3px 0 6px;
     716    padding: 7px 0 6px;
    735717}
    736718
    … …  
    738720    text-align: right;
    739721    float: right;
    740     line-height: 23px;
    741     margin: 4px 0 1px;
    742722}
    743723

  • trunk/src/wp-admin/includes/nav-menu.php

    r35885 r36379  
    265265        <input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
    266266        <p id="menu-item-url-wrap">
    267             <label class="howto" for="custom-menu-item-url">
    268                 <span><?php _e('URL'); ?></span>
    269                 <input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text" class="code menu-item-textbox" value="http://" />
    270             </label>
     267            <label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
     268            <input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text" class="code menu-item-textbox" value="http://" />
    271269        </p>
    272270
    273271        <p id="menu-item-name-wrap">
    274             <label class="howto" for="custom-menu-item-name">
    275                 <span><?php _e( 'Link Text' ); ?></span>
    276                 <input id="custom-menu-item-name" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" type="text" class="regular-text menu-item-textbox input-with-default-title" title="<?php esc_attr_e('Menu Item'); ?>" />
    277             </label>
     272            <label class="howto" for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
     273            <input id="custom-menu-item-name" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" type="text" class="regular-text menu-item-textbox" />
    278274        </p>
    279275
    … …  
    436432            ?>
    437433            <p class="quick-search-wrap">
    438                 <input type="search" class="quick-search input-with-default-title" title="<?php esc_attr_e('Search'); ?>" value="<?php echo $searched; ?>" name="quick-search-posttype-<?php echo $post_type_name; ?>" />
     434                <label for="quick-search-posttype-<?php echo $post_type_name; ?>" class="screen-reader-text"><?php _e( 'Search' ); ?></label>
     435                <input type="search" class="quick-search" value="<?php echo $searched; ?>" name="quick-search-posttype-<?php echo $post_type_name; ?>" id="quick-search-posttype-<?php echo $post_type_name; ?>" />
    439436                <span class="spinner"></span>
    440437                <?php submit_button( __( 'Search' ), 'button-small quick-search-submit button-secondary hide-if-js', 'submit', false, array( 'id' => 'submit-quick-search-posttype-' . $post_type_name ) ); ?>
    … …  
    715712            ?>
    716713            <p class="quick-search-wrap">
    717                 <input type="search" class="quick-search input-with-default-title" title="<?php esc_attr_e('Search'); ?>" value="<?php echo $searched; ?>" name="quick-search-taxonomy-<?php echo $taxonomy_name; ?>" />
     714                <label for="quick-search-taxonomy-<?php echo $taxonomy_name; ?>" class="screen-reader-text"><?php _e( 'Search' ); ?></label>
     715                <input type="search" class="quick-search" value="<?php echo $searched; ?>" name="quick-search-taxonomy-<?php echo $taxonomy_name; ?>" id="quick-search-taxonomy-<?php echo $taxonomy_name; ?>" />
    718716                <span class="spinner"></span>
    719717                <?php submit_button( __( 'Search' ), 'button-small quick-search-submit button-secondary hide-if-js', 'submit', false, array( 'id' => 'submit-quick-search-taxonomy-' . $taxonomy_name ) ); ?>

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

    r36286 r36379  
    914914
    915915    $document.on( 'wp-pin-menu wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu', setPinMenu );
     916
     917    // Set initial focus on a specific element.
     918    $( '.wp-initial-focus' ).focus();
    916919});
    917920

  • trunk/src/wp-admin/js/nav-menu.js

    r33540 r36379  
    3131        isRTL: !! ( 'undefined' != typeof isRtl && isRtl ),
    3232        negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1,
     33        lastSearch: '',
    3334
    3435        // Functions that run on init.
    … …  
    4142            this.attachMenuEditListeners();
    4243
    43             this.setupInputWithDefaultTitle();
    4444            this.attachQuickSearchListeners();
    4545            this.attachThemeLocationsListeners();
    … …  
    445445            if ( 0 !== position ) {
    446446                thisLink = menuItem.find( '.menus-move-up' );
    447                 thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
     447                thisLink.attr( 'aria-label', menus.moveUp ).css( 'display', 'inline' );
    448448            }
    449449
    450450            if ( 0 !== position && isPrimaryMenuItem ) {
    451451                thisLink = menuItem.find( '.menus-move-top' );
    452                 thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
     452                thisLink.attr( 'aria-label', menus.moveToTop ).css( 'display', 'inline' );
    453453            }
    454454
    455455            if ( position + 1 !== totalMenuItems && 0 !== position ) {
    456456                thisLink = menuItem.find( '.menus-move-down' );
    457                 thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     457                thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' );
    458458            }
    459459
    460460            if ( 0 === position && 0 !== hasSameDepthSibling ) {
    461461                thisLink = menuItem.find( '.menus-move-down' );
    462                 thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     462                thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' );
    463463            }
    464464
    … …  
    466466                thisLink = menuItem.find( '.menus-move-left' ),
    467467                thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
    468                 thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).text( thisLinkText ).css( 'display', 'inline' );
     468                thisLink.attr( 'aria-label', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).text( thisLinkText ).css( 'display', 'inline' );
    469469            }
    470470
    … …  
    473473                    thisLink = menuItem.find( '.menus-move-right' ),
    474474                    thisLinkText = menus.under.replace( '%s', prevItemNameRight );
    475                     thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).text( thisLinkText ).css( 'display', 'inline' );
     475                    thisLink.attr( 'aria-label', menus.moveUnder.replace( '%s', prevItemNameRight ) ).text( thisLinkText ).css( 'display', 'inline' );
    476476                }
    477477            }
    … …  
    495495            }
    496496
    497             $this.prop('title', title).text( title );
     497            // @todo Consider to update just the `aria-label` attribute.
     498            $this.attr( 'aria-label', title ).text( title );
    498499
    499500            // Mark this item's accessibility as refreshed
    … …  
    834835        },
    835836
    836         /**
    837          * An interface for managing default values for input elements
    838          * that is both JS and accessibility-friendly.
    839          *
    840          * Input elements that add the class 'input-with-default-title'
    841          * will have their values set to the provided HTML title when empty.
    842          */
    843         setupInputWithDefaultTitle : function() {
    844             var name = 'input-with-default-title';
    845 
    846             $('.' + name).each( function(){
    847                 var $t = $(this), title = $t.attr('title'), val = $t.val();
    848                 $t.data( name, title );
    849 
    850                 if( '' === val ) $t.val( title );
    851                 else if ( title == val ) return;
    852                 else $t.removeClass( name );
    853             }).focus( function(){
    854                 var $t = $(this);
    855                 if( $t.val() == $t.data(name) )
    856                     $t.val('').removeClass( name );
    857             }).blur( function(){
    858                 var $t = $(this);
    859                 if( '' === $t.val() )
    860                     $t.addClass( name ).val( $t.data(name) );
    861             });
    862 
    863             $( '.blank-slate .input-with-default-title' ).focus();
    864         },
    865 
    866837        attachThemeLocationsListeners : function() {
    867838            var loc = $('#nav-menu-theme-locations'), params = {};
    … …  
    881852
    882853        attachQuickSearchListeners : function() {
    883             var searchTimer;
    884 
    885             $('.quick-search').keypress(function(e){
     854            var searchTimer,
     855                inputEvent;
     856
     857            /*
     858             * Use feature detection to determine whether password inputs should use
     859             * the `keyup` or `input` event. Input is preferred but lacks support
     860             * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59
     861             */
     862            if ( 'oninput' in document.createElement( 'input' ) ) {
     863                inputEvent = 'input';
     864            } else {
     865                inputEvent = 'keyup';
     866            }
     867
     868            $( '.quick-search' ).on( inputEvent, function( e ) {
    886869                var t = $(this);
    887870
    … …  
    895878                searchTimer = setTimeout(function(){
    896879                    api.updateQuickSearchResults( t );
    897                 }, 400);
     880                }, 500 );
     881            }).on( 'blur', function() {
     882                api.lastSearch = '';
    898883            }).attr('autocomplete','off');
    899884        },
    … …  
    901886        updateQuickSearchResults : function(input) {
    902887            var panel, params,
    903             minSearchLength = 2,
    904             q = input.val();
    905 
    906             if( q.length < minSearchLength ) return;
     888                minSearchLength = 2,
     889                q = input.val();
     890
     891            /*
     892             * Minimum characters for a search. Also avoid a new AJAX search when
     893             * the pressed key (e.g. arrows) doesn't change the searched term.
     894             */
     895            if ( q.length < minSearchLength || api.lastSearch == q ) {
     896                return;
     897            }
     898
     899            api.lastSearch = q;
    907900
    908901            panel = input.parents('.tabs-panel');

  • trunk/src/wp-admin/nav-menus.php

    r36171 r36379  
    737737                    wp_nonce_field( 'update-nav_menu', 'update-nav-menu-nonce' );
    738738
    739                     if ( $one_theme_location_no_menus ) { ?>
     739                    $menu_name_aria_desc = $add_new_screen ? ' aria-describedby="menu-name-desc"' : '';
     740
     741                    if ( $one_theme_location_no_menus ) {
     742                        $menu_name_val = 'value="' . esc_attr( 'Menu 1' ) . '"';
     743                    ?>
    740744                        <input type="hidden" name="zero-menu-state" value="true" />
    741                     <?php } ?>
     745                    <?php } else {
     746                        $menu_name_val = 'value="' . esc_attr( $nav_menu_selected_title ) . '"';
     747                    } ?>
    742748                    <input type="hidden" name="action" value="update" />
    743749                    <input type="hidden" name="menu" id="menu" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
    744750                    <div id="nav-menu-header">
    745751                        <div class="major-publishing-actions">
    746                             <label class="menu-name-label howto open-label" for="menu-name">
    747                                 <span><?php _e( 'Menu Name' ); ?></span>
    748                                 <input name="menu-name" id="menu-name" type="text" class="menu-name regular-text menu-item-textbox input-with-default-title" title="<?php esc_attr_e( 'Enter menu name here' ); ?>" value="<?php if ( $one_theme_location_no_menus ) _e( 'Menu 1' ); else echo esc_attr( $nav_menu_selected_title ); ?>" />
    749                             </label>
     752                            <label class="menu-name-label" for="menu-name"><?php _e( 'Menu Name' ); ?></label>
     753                            <input name="menu-name" id="menu-name" type="text" class="menu-name regular-text menu-item-textbox" <?php echo $menu_name_val . $menu_name_aria_desc; ?> />
    750754                            <div class="publishing-action">
    751755                                <?php submit_button( empty( $nav_menu_selected_id ) ? __( 'Create Menu' ) : __( 'Save Menu' ), 'button-primary menu-save', 'save_menu', false, array( 'id' => 'save_menu_header' ) ); ?>
    … …  
    770774                            <?php endif; ?>
    771775                            <?php if ( $add_new_screen ) : ?>
    772                                 <p class="post-body-plain"><?php _e( 'Give your menu a name above, then click Create Menu.' ); ?></p>
     776                                <p class="post-body-plain" id="menu-name-desc"><?php _e( 'Give your menu a name, then click Create Menu.' ); ?></p>
    773777                                <?php if ( isset( $_GET['use-location'] ) ) : ?>
    774778                                    <input type="hidden" name="use-location" value="<?php echo esc_attr( $_GET['use-location'] ); ?>" />
    … …  
    802806                                            <label for="locations-<?php echo esc_attr( $location ); ?>"><?php echo $description; ?></label>
    803807                                            <?php if ( ! empty( $menu_locations[ $location ] ) && $menu_locations[ $location ] != $nav_menu_selected_id ) : ?>
    804                                                 <span class="theme-location-set"><?php 
     808                                                <span class="theme-location-set"><?php
    805809                                                    /* translators: %s: menu name */
    806810                                                    printf( _x( '(Currently set to: %s)', 'menu location' ),

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r35722 r36379  
    744744                    </button>
    745745                </h4>
    746                 <div class="accordion-section-content">
     746                <div class="accordion-section-content customlinkdiv">
    747747                    <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
    748748                    <p id="menu-item-url-wrap">
    749                         <label class="howto" for="custom-menu-item-url">
    750                             <span><?php _e( 'URL' ); ?></span>
    751                             <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
    752                         </label>
     749                        <label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
     750                        <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
    753751                    </p>
    754752                    <p id="menu-item-name-wrap">
    755                         <label class="howto" for="custom-menu-item-name">
    756                             <span><?php _e( 'Link Text' ); ?></span>
    757                             <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
    758                         </label>
     753                        <label class="howto" for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
     754                        <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
    759755                    </p>
    760756                    <p class="button-controls">
Note: See TracChangeset for help on using the changeset viewer.