WordPress.org
Get WordPress

Make WordPress Core

Changeset 36379


Ignore:
Timestamp:
01/22/2016 02:25:58 PM (11 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.