WordPress.org

Make WordPress Core

Changeset 38770


Ignore:
Timestamp:
10/10/16 16:23:23 (13 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.