WordPress.org

Make WordPress Core

Changeset 41227


Ignore:
Timestamp:
08/03/2017 10:12:01 PM (4 years ago)
Author:
afercia
Message:

Menus: Visually hide the menu item edit link text in a consistent way.

Fixes a visual glitch visible on Ubuntu. WordPress uses system fonts and they have
different metrics across operating systems. Uses screen-reader-text as a more
solid way to visually hide text.

Props punit5658, afercia.
Fixes #41497.

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

Legend:

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

    r41197 r41227  
    582582    width: 30px;
    583583    height: 40px;
    584     margin-right: 0 !important;
    585     text-indent: 100%;
    586584    outline: none;
    587     overflow: hidden;
    588     white-space: nowrap;
    589585}
    590586
     
    594590    width: auto;
    595591    height: auto;
    596     margin-right: -10px !important;
    597     padding: 12px 0;
     592    margin: 12px -10px 12px 0;
     593    padding: 0;
    598594    color: #0073aa;
    599595    text-decoration: underline;
    600596    font-size: 12px;
    601597    line-height: 18px;
    602     text-indent: 0;
     598}
     599
     600.no-js.nav-menus-php .item-edit .screen-reader-text {
     601    position: static;
     602    width: auto;
     603    height: auto;
     604    margin: 0;
    603605}
    604606
     
    619621}
    620622
    621 .nav-menus-php .item-edit:focus {
     623.js.nav-menus-php .item-edit:focus {
    622624    box-shadow: none;
    623625}
  • trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

    r40988 r41227  
    146146                        <a class="item-edit" id="edit-<?php echo $item_id; ?>" href="<?php
    147147                            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 ) ) );
    148                         ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><?php _e( 'Edit' ); ?></a>
     148                        ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><span class="screen-reader-text"><?php _e( 'Edit' ); ?></span></a>
    149149                    </span>
    150150                </div>
  • trunk/src/wp-admin/js/nav-menu.js

    r39928 r41227  
    501501            }
    502502
    503             // @todo Consider to update just the `aria-label` attribute.
    504             $this.attr( 'aria-label', title ).text( title );
     503            $this.attr( 'aria-label', title );
    505504
    506505            // Mark this item's accessibility as refreshed
Note: See TracChangeset for help on using the changeset viewer.