WordPress.org

Make WordPress Core

Changeset 38770


Ignore:
Timestamp:
10/10/2016 04:23:23 PM (20 months ago)
Author:
afercia
Message:

Accessibility: Improve the UI controls to move the Menu items.

On the Menus screen, the links to move menu items behave like buttons: they
perform an action so they should be real buttons to be correctly reported to
assistive technologies. Since they're logically grouped controls, they should
also be wrapped in a <fieldset> element for better semantics and accessibility.

Props Cheffheid.
Fixes #35578.

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

Legend:

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

    r38754 r38770  
    647647}
    648648
    649 .menu-item-settings .field-move a {
     649.menu-item-settings .field-move {
     650    margin: 3px 0 5px;
     651    line-height: 1.5;
     652}
     653
     654.field-move-visual-label {
     655    float: left;
     656    margin-right: 4px;
     657    font-style: italic;
     658}
     659
     660.menu-item-settings .field-move .button-link {
    650661    display: none;
    651662    margin: 0 2px;
     663    color: #0073aa;
     664    font-style: italic;
     665    text-decoration: underline;
     666}
     667
     668.menu-item-settings .field-move .button-link:hover,
     669.menu-item-settings .field-move .button-link:active {
     670    color: #00a0d2;
     671}
     672
     673.menu-item-settings .field-move .button-link:focus {
     674    color: #124964;
     675    -webkit-box-shadow:
     676        0 0 0 1px #5b9dd9,
     677        0 0 2px 1px rgba(30, 140, 190, .8);
     678    box-shadow:
     679        0 0 0 1px #5b9dd9,
     680        0 0 2px 1px rgba(30, 140, 190, .8);
    652681}
    653682
  • trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

    r37953 r38770  
    198198                </p>
    199199
    200                 <p class="field-move hide-if-no-js description description-wide">
    201                     <label>
    202                         <span><?php _e( 'Move' ); ?></span>
    203                         <a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
    204                         <a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
    205                         <a href="#" class="menus-move menus-move-left" data-dir="left"></a>
    206                         <a href="#" class="menus-move menus-move-right" data-dir="right"></a>
    207                         <a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
    208                     </label>
    209                 </p>
     200                <fieldset class="field-move hide-if-no-js description description-wide">
     201                    <span class="field-move-visual-label" aria-hidden="true"><?php _e( 'Move' ); ?></span>
     202                    <button type="button" class="button-link menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></button>
     203                    <button type="button" class="button-link menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></button>
     204                    <button type="button" class="button-link menus-move menus-move-left" data-dir="left"></button>
     205                    <button type="button" class="button-link menus-move menus-move-right" data-dir="right"></button>
     206                    <button type="button" class="button-link menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></button>
     207                </fieldset>
    210208
    211209                <div class="menu-item-actions description-wide submitbox">
  • trunk/src/wp-admin/js/nav-menu.js

    r38754 r38770  
    407407
    408408            // Links for moving items
    409             menu.on( 'click', '.menus-move', function ( e ) {
     409            menu.on( 'click', '.menus-move', function () {
    410410                var $this = $( this ),
    411411                    dir = $this.data( 'dir' );
     
    414414                    api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
    415415                }
    416                 e.preventDefault();
    417416            });
    418417        },
     
    516515        refreshAdvancedAccessibility : function() {
    517516
    518             // Hide all links by default
    519             $( '.menu-item-settings .field-move a' ).hide();
     517            // Hide all the move buttons by default.
     518            $( '.menu-item-settings .field-move .menus-move' ).hide();
    520519
    521520            // Mark all menu items as unprocessed
Note: See TracChangeset for help on using the changeset viewer.