From babec6d3998be12f0a6c27c67a1ade77cf490a16 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 3 Aug 2017 22:12:01 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41227 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/nav-menus.css                 | 18 ++++++++++--------
 .../includes/class-walker-nav-menu-edit.php    |  2 +-
 src/wp-admin/js/nav-menu.js                    |  3 +--
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index 6009f6cb1d..7950053f7c 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -581,11 +581,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	display: block;
 	width: 30px;
 	height: 40px;
-	margin-right: 0 !important;
-	text-indent: 100%;
 	outline: none;
-	overflow: hidden;
-	white-space: nowrap;
 }
 
 .no-js.nav-menus-php .item-edit {
@@ -593,13 +589,19 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	float: right;
 	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;
 }
 
 .nav-menus-php .item-edit:before {
@@ -618,7 +620,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	text-indent: 1px; /* account for the dashicon alignment */
 }
 
-.nav-menus-php .item-edit:focus {
+.js.nav-menus-php .item-edit:focus {
 	box-shadow: none;
 }
 
diff --git a/src/wp-admin/includes/class-walker-nav-menu-edit.php b/src/wp-admin/includes/class-walker-nav-menu-edit.php
index 33945520b9..57802c9227 100644
--- a/src/wp-admin/includes/class-walker-nav-menu-edit.php
+++ b/src/wp-admin/includes/class-walker-nav-menu-edit.php
@@ -145,7 +145,7 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
 						</span>
 						<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>
 			</div>
diff --git a/src/wp-admin/js/nav-menu.js b/src/wp-admin/js/nav-menu.js
index bcce09a5dd..79a8556dbe 100644
--- a/src/wp-admin/js/nav-menu.js
+++ b/src/wp-admin/js/nav-menu.js
@@ -500,8 +500,7 @@ var wpNavMenu;
 				title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
 			}
 
-			// @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
 			$this.data( 'needs_accessibility_refresh', false );