Changeset 41227

Timestamp:

08/03/2017 10:12:01 PM (9 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:

• css/nav-menus.css (modified) (3 diffs)
• includes/class-walker-nav-menu-edit.php (modified) (1 diff)
• js/nav-menu.js (modified) (1 diff)

trunk/src/wp-admin/css/nav-menus.css

@@ -582 +582 @@
         width: 30px;
         height: 40px;
-        margin-right: 0 !important;
-        text-indent: 100%;
         outline: none;
-        overflow: hidden;
-        white-space: nowrap;
 }
 
@@ -594 +590 @@
         width: auto;
         height: auto;
-        margin-right: -10px !important;
-        padding: 12px 0;
+        margin: 12px -10px 12px 0;
+        padding: 0;
         color: #0073aa;
         text-decoration: underline;
         font-size: 12px;
         line-height: 18px;
-        text-indent: 0;
+}
+
+.no-js.nav-menus-php .item-edit .screen-reader-text {
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
 }
 
@@ -619 +621 @@
 }
 
-.nav-menus-php .item-edit:focus {
+.js.nav-menus-php .item-edit:focus {
         box-shadow: none;
 }

trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

@@ -146 +146 @@
                                                 <a class="item-edit" id="edit-<?php echo $item_id; ?>" href="<?php
                                                         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 ) ) );
-                                                ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><?php _e( 'Edit' ); ?></a>
+                                                ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><span class="screen-reader-text"><?php _e( 'Edit' ); ?></span></a>
                                         </span>
                                 </div>

trunk/src/wp-admin/js/nav-menu.js

@@ -501 +501 @@
                         }
 
-                        // @todo Consider to update just the `aria-label` attribute.
-                        $this.attr( 'aria-label', title ).text( title );
+                        $this.attr( 'aria-label', title );
 
                         // Mark this item's accessibility as refreshed