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.

Built from https://develop.svn.wordpress.org/trunk@41227


git-svn-id: http://core.svn.wordpress.org/trunk@41067 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/nav-menus-rtl.css

@@ -581,11 +581,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	display: block;
 	width: 30px;
 	height: 40px;
-	margin-left: 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: left;
 	width: auto;
 	height: auto;
-	margin-left: -10px !important;
+	margin: 12px 0 12px -10px;
-	padding: 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;
 }
 

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;
+	margin: 12px -10px 12px 0;
-	padding: 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;
 }
 

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>

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 );
-			$this.attr( 'aria-label', title ).text( title );
 
 			// Mark this item's accessibility as refreshed
 			$this.data( 'needs_accessibility_refresh', false );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41226';
+$wp_version = '4.9-alpha-41227';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.