Make WordPress Core

Changeset 36016


Ignore:
Timestamp:
12/19/2015 12:16:30 AM (7 years ago)
Author:
afercia
Message:

Accessibility: Remove title attributes and improve accessibility on the "no-js" Menus screen.

When JavaScript is off, the reorder menu item and Edit menu item links now use aria-label
attributes instead of title attributes.

Fixes #35134.

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

Legend:

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

    r35473 r36016  
    619619}
    620620
     621.no-js.nav-menus-php .item-edit {
     622    position: static;
     623    float: right;
     624    width: auto;
     625    height: auto;
     626    margin-right: -10px !important;
     627    padding: 12px 0;
     628    color: #0073aa;
     629    text-decoration: underline;
     630    font-size: 12px;
     631    line-height: 18px;
     632    text-indent: 0;
     633}
     634
    621635.nav-menus-php .item-edit:before {
    622636    margin-top: 10px;
     
    628642}
    629643
     644.no-js.nav-menus-php .item-edit:before {
     645    display: none;
     646}
     647
    630648.rtl .nav-menus-php .item-edit:before {
    631649    text-indent: 1px; /* account for the dashicon alignment */
     
    639657.nav-menus-php .item-edit:focus:before {
    640658    -webkit-box-shadow:
    641         0 0 0 1px #5b9dd9,
     659        0 0 0 1px #5b9dd9,
    642660        0 0 2px 1px rgba(30, 140, 190, .8);
    643     box-shadow:
    644         0 0 0 1px #5b9dd9,
     661    box-shadow:
     662        0 0 0 1px #5b9dd9,
    645663        0 0 2px 1px rgba(30, 140, 190, .8);
    646664}
  • trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

    r35382 r36016  
    127127                                    'move-menu_item'
    128128                                );
    129                             ?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">&#8593;</abbr></a>
     129                            ?>" class="item-move-up" aria-label="<?php esc_attr_e( 'Move up' ) ?>">&#8593;</a>
    130130                            |
    131131                            <a href="<?php
     
    140140                                    'move-menu_item'
    141141                                );
    142                             ?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">&#8595;</abbr></a>
     142                            ?>" class="item-move-down" aria-label="<?php esc_attr_e( 'Move down' ) ?>">&#8595;</a>
    143143                        </span>
    144                         <a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
     144                        <a class="item-edit" id="edit-<?php echo $item_id; ?>" href="<?php
    145145                            echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
    146                         ?>"><?php _e( 'Edit Menu Item' ); ?></a>
     146                        ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><?php _e( 'Edit' ); ?></a>
    147147                    </span>
    148148                </div>
Note: See TracChangeset for help on using the changeset viewer.