From 590a7de43bfd266db743d37d7e48fb9464918e0f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 25 Oct 2016 17:28:40 +0000
Subject: [PATCH] Menus: Improve the HTML semantics of the "Menu Settings"
 section.

- removes the previous markup based on a definition list
- groups checkboxes in `fieldset` elements with a `legend`
- simplifies the CSS lowering selectors specificity

Props xavortm.

Fixes #38023.


git-svn-id: https://develop.svn.wordpress.org/trunk@38912 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/nav-menus.css | 35 ++++++++++++++++++++--------------
 src/wp-admin/nav-menus.php     | 20 ++++++++++---------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index dd84fc5466..5ce779cfff 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -109,24 +109,28 @@ ul.add-menu-item-tabs li {
 	margin-top: 2em;
 }
 
-.menu-settings dl {
+.menu-settings-group {
 	margin: 0 0 10px;
 	overflow: hidden;
-	padding-left: 18%;
+	padding-left: 20%;
 }
 
-.menu-settings dd {
+.menu-settings-group:last-of-type {
+	margin-bottom: 0;
+}
+
+.menu-settings-input {
 	float: left;
 	margin: 0;
 	width: 100%;
 }
 
-.menu-settings dt {
+.menu-settings-group-name {
 	float: left;
 	clear: both;
-	width: 21.951%;
+	width: 25%;
 	padding: 3px 0 0;
-	margin-left: -21.951%;
+	margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */
 }
 
 .menu-settings label {
@@ -869,23 +873,26 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 		width: 25px;
 	}
 
-	.menu-settings dl {
+	.menu-settings-group {
 		padding-left: 0;
 	}
 
-	.menu-settings dd {
-		float: none;
-		width: 100%;
-		margin-bottom: 15px;
-	}
-
-	.menu-settings dt {
+	.menu-settings-group-name {
 		float: none;
 		width: auto;
 		margin-left: 0;
 		margin-bottom: 15px;
 	}
 
+	.menu-settings-input {
+		float: none;
+		margin-bottom: 15px;
+	}
+
+	.menu-edit .checkbox-input {
+	    margin-top: 0;
+	}
+
 	.manage-menus select {
 		margin: 0.5em 0;
 	}
diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
index 6ff1587925..3f8646f917 100644
--- a/src/wp-admin/nav-menus.php
+++ b/src/wp-admin/nav-menus.php
@@ -798,17 +798,19 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 										$auto_add = false;
 								} ?>
 
-								<dl class="auto-add-pages">
-									<dt class="howto"><?php _e( 'Auto add pages' ); ?></dt>
-									<dd class="checkbox-input"><input type="checkbox"<?php checked( $auto_add ); ?> name="auto-add-pages" id="auto-add-pages" value="1" /> <label for="auto-add-pages"><?php printf( __('Automatically add new top-level pages to this menu' ), esc_url( admin_url( 'edit.php?post_type=page' ) ) ); ?></label></dd>
-								</dl>
+								<fieldset class="menu-settings-group auto-add-pages">
+									<legend class="menu-settings-group-name howto"><?php _e( 'Auto add pages' ); ?></legend>
+									<div class="menu-settings-input checkbox-input">
+										<input type="checkbox"<?php checked( $auto_add ); ?> name="auto-add-pages" id="auto-add-pages" value="1" /> <label for="auto-add-pages"><?php printf( __('Automatically add new top-level pages to this menu' ), esc_url( admin_url( 'edit.php?post_type=page' ) ) ); ?></label>
+									</div>
+								</fieldset>
 
 								<?php if ( current_theme_supports( 'menus' ) ) : ?>
 
-									<dl class="menu-theme-locations">
-										<dt class="howto"><?php _e( 'Theme locations' ); ?></dt>
+									<fieldset class="menu-settings-group menu-theme-locations">
+										<legend class="menu-settings-group-name howto"><?php _e( 'Theme locations' ); ?></legend>
 										<?php foreach ( $locations as $location => $description ) : ?>
-										<dd class="checkbox-input">
+										<div class="menu-settings-input checkbox-input">
 											<input type="checkbox"<?php checked( isset( $menu_locations[ $location ] ) && $menu_locations[ $location ] == $nav_menu_selected_id ); ?> name="menu-locations[<?php echo esc_attr( $location ); ?>]" id="locations-<?php echo esc_attr( $location ); ?>" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
 											<label for="locations-<?php echo esc_attr( $location ); ?>"><?php echo $description; ?></label>
 											<?php if ( ! empty( $menu_locations[ $location ] ) && $menu_locations[ $location ] != $nav_menu_selected_id ) : ?>
@@ -819,9 +821,9 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 													);
 												?></span>
 											<?php endif; ?>
-										</dd>
+										</div>
 										<?php endforeach; ?>
-									</dl>
+									</fieldset>
 
 								<?php endif; ?>