Changeset 41227

Timestamp:

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