WordPress.org

Make WordPress Core

Ticket #35374: 35374.2.patch

File 35374.2.patch, 16.4 KB (added by afercia, 4 years ago)
  • src/wp-admin/css/nav-menus.css

     
    6161        position: relative;
    6262}
    6363
    64 .blank-slate .menu-name {
    65         height: 2em;
    66 }
    67 
    6864.blank-slate .menu-settings {
    6965        border: none;
    7066        margin-top: 0;
     
    179175}
    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
    185184.nav-menus-php #post-body div.updated,
     
    248247        border-right: 1px solid #ccc;
    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;
    267252}
     
    268253
    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;
    274259}
     
    277262        margin: 0;
    278263}
    279264
    280 .customlinkdiv .howto input {
    281         width: 180px;
    282 }
    283 
    284265.customlinkdiv p {
    285266        margin-top: 0
    286267}
     
    355336/* Create Menu */
    356337#menu-name {
    357338        width: 270px;
     339        vertical-align: middle;
    358340}
    359341
    360342#manage-menu .inside {
     
    381363        width: 180px;
    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
    390372/* Menu item types */
     
    731713/* Major/minor publishing actions (classes) */
    732714.nav-menus-php .major-publishing-actions {
    733715        clear: both;
    734         padding: 3px 0 6px;
     716        padding: 7px 0 6px;
    735717}
    736718
    737719.nav-menus-php .major-publishing-actions .publishing-action {
    738720        text-align: right;
    739721        float: right;
    740         line-height: 23px;
    741         margin: 4px 0 1px;
    742722}
    743723
    744724.nav-menus-php .blank-slate .menu-settings {
  • src/wp-admin/includes/nav-menu.php

     
    264264        <div class="customlinkdiv" id="customlinkdiv">
    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
    280276                <p class="button-controls">
     
    435431                        }
    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 ) ); ?>
    441438                        </p>
     
    714711                        }
    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 ) ); ?>
    720718                        </p>
  • src/wp-admin/js/common.js

     
    913913        aria_button_if_js();
    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
    918921// Fire a custom jQuery event at the end of window resize
  • src/wp-admin/js/nav-menu.js

     
    3030                menusChanged : false,
    3131                isRTL: !! ( 'undefined' != typeof isRtl && isRtl ),
    3232                negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1,
     33                lastSearch: '',
    3334
    3435                // Functions that run on init.
    3536                init : function() {
     
    4041
    4142                        this.attachMenuEditListeners();
    4243
    43                         this.setupInputWithDefaultTitle();
    4444                        this.attachQuickSearchListeners();
    4545                        this.attachThemeLocationsListeners();
    4646
     
    444444                        // Where can they move this menu item?
    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
    465465                        if ( ! isPrimaryMenuItem ) {
    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
    471471                        if ( 0 !== position ) {
     
    472472                                if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
    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                        }
    478478
     
    494494                                title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
    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
    500501                        $this.data( 'needs_accessibility_refresh', false );
     
    833834                        });
    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 = {};
    868839                        params.action = 'menu-locations-save';
     
    880851                },
    881852
    882853                attachQuickSearchListeners : function() {
    883                         var searchTimer;
     854                        var searchTimer,
     855                                inputEvent;
    884856
    885                         $('.quick-search').keypress(function(e){
     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
    888871                                if( 13 == e.which ) {
     
    894877
    895878                                searchTimer = setTimeout(function(){
    896879                                        api.updateQuickSearchResults( t );
    897                                 }, 400);
     880                                }, 500 );
     881                        }).on( 'blur', function() {
     882                                api.lastSearch = '';
    898883                        }).attr('autocomplete','off');
    899884                },
    900885
    901886                updateQuickSearchResults : function(input) {
    902887                        var panel, params,
    903                         minSearchLength = 2,
    904                         q = input.val();
     888                                minSearchLength = 2,
     889                                q = input.val();
    905890
    906                         if( q.length < minSearchLength ) return;
     891                        /*
     892                         * Minimum characters for a search. Also avoid a new AJAX search when
     893                         * the key pressed (e.g.arrows) doesn't change the searched term.
     894                         */
     895                        if ( q.length < minSearchLength || api.lastSearch == q ) {
     896                                return;
     897                        }
    907898
     899                        api.lastSearch = q;
     900
    908901                        panel = input.parents('.tabs-panel');
    909902                        params = {
    910903                                'action': 'menu-quick-search',
  • src/wp-admin/nav-menus.php

     
    736736                                        wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
    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' ) ); ?>
    752756                                                        </div><!-- END .publishing-action -->
     
    769773                                                        <?php } ?>
    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'] ); ?>" />
    775779                                                                <?php endif; ?>
     
    801805                                                                                        <input type="checkbox"<?php checked( isset( $menu_locations[ $location ] ) && $menu_locations[ $location ] == $nav_menu_selected_id ); ?> name="menu-locations[<?php echo esc_attr( $location ); ?>]" id="locations-<?php echo esc_attr( $location ); ?>" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
    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' ),
    807811                                                                                                                wp_get_nav_menu_object( $menu_locations[ $location ] )->name
  • src/wp-includes/class-wp-customize-nav-menus.php

     
    743743                                                <span class="toggle-indicator" aria-hidden="true"></span>
    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">
    761757                                                <span class="add-to-menu">