From 7cbe92b0ea45a8e674f5330b0404afae531e0c69 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <jorbin@git.wordpress.org>
Date: Fri, 23 Jan 2015 18:17:25 +0000
Subject: [PATCH] Improve accessibility of nav menu locations form.

A couple of small tweaks to the nav menu locations form that make it friendlier to assistive technology.  These include:
 * labels for selects
 * better context for the "Edit" link.  We hide "edit" from screen readers and instead give them a phrase with context since they may not be able to take advantage of the visual context

Additionally, there are some minor css tweaks to improve the visual alignment of the rows.
We also remove duplicate IDs and use classes instead.

Props afercia.
fixes #31090.



git-svn-id: https://develop.svn.wordpress.org/trunk@31272 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/nav-menus.css | 16 ++++++++++------
 src/wp-admin/nav-menus.php     | 10 +++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index 2ac58e3209..6f12e9d7cd 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -101,10 +101,6 @@ ul.add-menu-item-tabs li {
 	margin-top: 1px;
 }
 
-.menu-edit p {
-	margin: .3em 0 .6em;
-}
-
 .menu-edit #post-body-content h3 {
 	margin: 1em 0 10px;
 }
@@ -216,8 +212,16 @@ ul.add-menu-item-tabs li {
 	margin-top: -2px;
 }
 
-.widefat td.menu-location-menus {
-	padding-bottom: 5px;
+.widefat .menu-locations tr + tr td {
+	padding-top: 0;
+}
+
+.widefat .menu-locations td {
+	vertical-align: middle;
+}
+
+.menu-location-title label {
+	font-weight: bold;
 }
 
 .menu-location-menus select {
diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
index 6b196c1a00..312ab91a52 100644
--- a/src/wp-admin/nav-menus.php
+++ b/src/wp-admin/nav-menus.php
@@ -581,8 +581,8 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 				</tfoot>-->
 				<tbody class="menu-locations">
 				<?php foreach ( $locations as $_location => $_name ) { ?>
-					<tr id="menu-locations-row">
-						<td class="menu-location-title"><strong><?php echo $_name; ?></strong></td>
+					<tr class="menu-locations-row">
+						<td class="menu-location-title"><label for="locations-<?php echo $_location; ?>"><?php echo $_name; ?></label></td>
 						<td class="menu-location-menus">
 							<select name="menu-locations[<?php echo $_location; ?>]" id="locations-<?php echo $_location; ?>">
 								<option value="0"><?php printf( '&mdash; %s &mdash;', esc_html__( 'Select a Menu' ) ); ?></option>
@@ -597,7 +597,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 								<?php if ( isset( $menu_locations[ $_location ] ) && 0 != $menu_locations[ $_location ] ) : ?>
 								<span class="locations-edit-menu-link">
 									<a href="<?php echo esc_url( add_query_arg( array( 'action' => 'edit', 'menu' => $menu_locations[$_location] ), admin_url( 'nav-menus.php' ) ) ); ?>">
-										<?php _ex( 'Edit', 'menu' ); ?>
+										<span aria-hidden="true"><?php _ex( 'Edit', 'menu' ); ?></span><span class="screen-reader-text"><?php _e( 'Edit selected menu' ); ?></span>
 									</a>
 								</span>
 								<?php endif; ?>
@@ -606,9 +606,9 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 										<?php _ex( 'Use new menu', 'menu' ); ?>
 									</a>
 								</span>
-							</div><!-- #locations-row-links -->
+							</div><!-- .locations-row-links -->
 						</td><!-- .menu-location-menus -->
-					</tr><!-- #menu-locations-row -->
+					</tr><!-- .menu-locations-row -->
 				<?php } // foreach ?>
 				</tbody>
 			</table>