From ef14cd1952726af849b6795f466befd30ee3990b Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Mon, 2 Oct 2017 04:11:50 +0000
Subject: [PATCH] Customize: Fix `WP_Customize_Date_Time_Control` to be
 re-usable for plugins and custom settings.

* Allow time fields to be omitted by constructing with `timeIncluded` as `false`.
* Ensure `reportValidity` is only called on a control when it is in an expanded section.
* Rename "ampm" to "meridian".
* Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control.
* Fix styling of dropdowns and clean CSS.
* Improve accessibility of nav menus component.

Props westonruter, afercia, sayedwp, melchoyce.
Amends [41626].
See #39896.
Fixes #42022.


git-svn-id: https://develop.svn.wordpress.org/trunk@41670 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       |  83 +++++-----
 src/wp-admin/css/customize-nav-menus.css      |   1 -
 src/wp-admin/js/customize-controls.js         | 144 ++++++++++--------
 .../class-wp-customize-manager.php            |  24 +--
 .../class-wp-customize-nav-menus.php          |   6 +-
 .../class-wp-customize-date-time-control.php  | 107 +++++++------
 tests/qunit/index.html                        | 111 +++++++-------
 tests/qunit/wp-admin/js/customize-controls.js |  46 +++---
 8 files changed, 277 insertions(+), 245 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 35095d160f..6180998951 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -173,25 +173,7 @@ body.trashing #publish-settings {
 }
 
 #customize-controls .date-input:invalid {
-	border-color: red;
-}
-
-.date-time-fields .month-field {
-	width: 79px;
-}
-
-.date-time-fields .day-field,
-.date-time-fields .hour-field,
-.date-time-fields .minute-field {
-	width: 46px;
-}
-
-.date-time-fields .year-field {
-	width: 60px;
-}
-
-.date-time-fields .am-pm-field {
-	width: 53px;
+	border-color: #dc3232;
 }
 
 #customize-control-changeset_status label {
@@ -225,7 +207,7 @@ body.trashing #publish-settings {
 
 .customize-copy-preview-link:before,
 .customize-copy-preview-link:after {
-	content: '';
+	content: "";
 	height: 28px;
 	position: absolute;
 	background: #ffffff;
@@ -250,7 +232,7 @@ body.trashing #publish-settings {
 	border-left: none;
 	border-right: none;
 	text-indent: -999px;
-	color: white;
+	color: #fff;
 }
 
 #customize-control-changeset_preview_link label {
@@ -258,7 +240,7 @@ body.trashing #publish-settings {
 	display: block;
 }
 
-#customize-control-changeset_preview_link a.preview-control-element {
+#customize-control-changeset_preview_link a {
 	display: inline-block;
 	position: absolute;
 	white-space: nowrap;
@@ -269,10 +251,10 @@ body.trashing #publish-settings {
 	text-decoration: none;
 }
 
-#customize-control-changeset_preview_link a.preview-control-element.disabled,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:active,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:focus,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:visited {
+#customize-control-changeset_preview_link a.disabled,
+#customize-control-changeset_preview_link a.disabled:active,
+#customize-control-changeset_preview_link a.disabled:focus,
+#customize-control-changeset_preview_link a.disabled:visited {
 	color: black;
 	opacity: 0.4;
 	cursor: default;
@@ -293,10 +275,30 @@ body.trashing #publish-settings {
 	padding-bottom:10px;
 }
 
-.date-time-fields label,
-.date-time-fields .date-time-separator {
+.customize-control.customize-control-date_time .date-time-fields .date-input,
+.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
 	float: left;
-	margin-right:5px;
+	margin-right: 5px;
+}
+
+.date-time-fields .date-input.month {
+	width: auto;
+	margin: 0;
+}
+
+.date-time-fields .date-input.day,
+.date-time-fields .date-input.hour,
+.date-time-fields .date-input.minute {
+	width: 46px;
+}
+
+.date-time-fields .date-input.year {
+	width: 60px;
+}
+
+.date-time-fields .date-input.meridian {
+	width: auto;
+	margin: 0;
 }
 
 .date-time-fields .date-time-separator {
@@ -304,7 +306,7 @@ body.trashing #publish-settings {
 }
 
 .date-time-fields .time-row {
-	padding-top: 12px;
+	margin-top: 12px;
 }
 
 .date-time-fields .date-timezone {
@@ -1035,7 +1037,7 @@ p.customize-section-description {
 }
 
 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
-	border: 1px solid #f00;
+	border: 1px solid #dc3232;
 }
 
 .customize-control-dropdown-pages .add-new-toggle {
@@ -1198,7 +1200,7 @@ p.customize-section-description {
 	margin-bottom: 0;
 }
 #customize-control-show_on_front.has-error .customize-control-notifications-container {
-	margin-top:12px;
+	margin-top: 12px;
 }
 
 /**
@@ -1383,7 +1385,10 @@ p.customize-section-description {
 	content: '';
 	position: absolute;
 	height: auto;
-	top: 0; left: 0; bottom: 0; right: 0;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 	border: 4px solid #00a0d2;
 	border-radius: 2px;
 }
@@ -2685,23 +2690,25 @@ body.adding-widget .add-new-widget:before,
 		height: 39px;
 	}
 
-	.date-time-fields .month-field {
+	.date-time-fields .date-input.month {
 		width: 79px;
 	}
 
-	.date-time-fields .day-field,
-	.date-time-fields .hour-field,
-	.date-time-fields .minute-field {
+	.date-time-fields .date-input.day,
+	.date-time-fields .date-input.hour,
+	.date-time-fields .date-input.minute {
 		width: 55px;
 	}
 
-	.date-time-fields .year-field {
+	.date-time-fields .date-input.year {
 		width: 80px;
 	}
 
+	.date-time-fields .date-time-separator,
 	.date-time-fields .date-timezone {
 		line-height: 3.2;
 	}
+
 	.wp-core-ui.wp-customizer .button {
 		margin-top: 12px;
 	}
diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index f9d8f81703..36138ca2a3 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -132,7 +132,6 @@
 
 .customize-control input.menu-name-field {
 	width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
-	margin: 12px 0;
 }
 
 .wp-customizer .menu-item .item-edit {
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 7c1a040b75..3b8cfdba34 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -4929,10 +4929,6 @@
 	 */
 	api.DateTimeControl = api.Control.extend({
 
-		dateInputs: {},
-		inputElements: {},
-		invalidDate: false,
-
 		/**
 		 * Initialize behaviors.
 		 *
@@ -4942,50 +4938,68 @@
 		ready: function ready() {
 			var control = this;
 
-			_.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
+			control.inputElements = {};
+			control.invalidDate = false;
 
-			control.dateInputs = control.container.find( '.date-input' );
+			_.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour', 'populateDateInputs' );
 
 			// @todo This needs https://core.trac.wordpress.org/ticket/37964
 			if ( ! control.setting ) {
 				control.setting = new api.Value();
 			}
 
+			// @todo Should this be? Default should be on client. The default value should be in the setting itself.
 			if ( ! control.setting.get() && control.params.defaultValue ) {
 				control.setting.set( control.params.defaultValue );
 			}
 
-			control.dateInputs.each( function() {
+			control.container.find( '.date-input' ).each( function() {
 				var input = $( this ), component, element;
 				component = input.data( 'component' );
 				element = new api.Element( input );
-				element.validate = function( value ) {
-					return _.contains( [ 'am', 'pm' ], value ) ? value : parseInt( value, 10 );
-				};
+				if ( 'meridian' === component ) {
+					element.validate = function( value ) {
+						if ( 'am' !== value && 'pm' !== value ) {
+							return null;
+						}
+						return value;
+					};
+				} else {
+					element.validate = function( value ) {
+						var val = parseInt( value, 10 );
+						if ( isNaN( val ) ) {
+							return null;
+						}
+						return val;
+					};
+				}
+				element.bind( control.populateSetting );
 				control.inputElements[ component ] = element;
 				control.elements.push( element );
 			} );
 
-			control.dateInputs.on( 'input', control.populateSetting );
 			control.inputElements.month.bind( control.updateDaysForMonth );
 			control.inputElements.year.bind( control.updateDaysForMonth );
-			control.inputElements.hour.bind( control.updateMinutesForHour );
+			if ( control.params.includeTime ) {
+				control.inputElements.hour.bind( control.updateMinutesForHour );
+			}
 			control.populateDateInputs();
+			control.setting.bind( control.populateDateInputs );
 		},
 
 		/**
 		 * Parse datetime string.
 		 *
 		 * @since 4.9.0
-		 * @param {string} datetime Date/Time string. Accepts Y-m-d H:i:s format.
-		 * @param {boolean} twelveHourFormat If twelve hour format array is required.
+		 *
+		 * @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format.
 		 * @returns {object|null} Returns object containing date components or null if parse error.
 		 */
-		parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
-			var matches, date, midDayHour = 12;
+		parseDateTime: function parseDateTime( datetime ) {
+			var control = this, matches, date, midDayHour = 12;
 
 			if ( datetime ) {
-				matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
+				matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ );
 			}
 
 			if ( ! matches ) {
@@ -4998,16 +5012,16 @@
 				year: matches.shift(),
 				month: matches.shift(),
 				day: matches.shift(),
-				hour: matches.shift(),
-				minute: matches.shift(),
-				second: matches.shift()
+				hour: matches.shift() || '00',
+				minute: matches.shift() || '00',
+				second: matches.shift() || '00'
 			};
 
-			if ( twelveHourFormat ) {
+			if ( control.params.includeTime && control.params.twelveHourFormat ) {
 				date.hour = parseInt( date.hour, 10 );
-				date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
+				date.meridian = date.hour >= midDayHour ? 'pm' : 'am';
 				date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
-				delete date.second;
+				delete date.second; // @todo Why only if twelveHourFormat?
 			}
 
 			return date;
@@ -5020,25 +5034,31 @@
 		 * @return {boolean} If date input fields has error.
 		 */
 		validateInputs: function validateInputs() {
-			var control = this, errorMessage;
+			var control = this, errorMessage, components;
 
 			control.invalidDate = false;
 
-			_.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
-				var element, el, max, min, maxLength, value;
+			components = [ 'year', 'day' ];
+			if ( control.params.includeTime ) {
+				components.push( 'hour', 'minute' );
+			}
+
+			_.each( components, function( component ) {
+				var element, el, max, min, value;
 
 				if ( ! control.invalidDate ) {
 					element = control.inputElements[ component ];
 					el = element.element.get( 0 );
 					max = parseInt( element.element.attr( 'max' ), 10 );
 					min = parseInt( element.element.attr( 'min' ), 10 );
-					maxLength = parseInt( element.element.attr( 'maxlength' ), 10 );
 					value = element();
-					control.invalidDate = value > max || value < min || String( value ).length > maxLength;
+					control.invalidDate = value > max || value < min;
 					errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
 
 					el.setCustomValidity( errorMessage );
-					_.result( el, 'reportValidity' );
+					if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
+						_.result( el, 'reportValidity' );
+					}
 				}
 			} );
 
@@ -5077,7 +5097,7 @@
 		updateMinutesForHour: function updateMinutesForHour() {
 			var control = this, maxHours = 24, minuteEl;
 
-			if ( control.inputElements.ampm ) {
+			if ( control.inputElements.meridian ) {
 				return;
 			}
 
@@ -5086,11 +5106,9 @@
 			if ( maxHours === control.inputElements.hour() ) {
 				control.inputElements.minute( 0 );
 				minuteEl.data( 'default-max', minuteEl.attr( 'max' ) );
-				minuteEl.data( 'default-maxlength', minuteEl.attr( 'maxlength' ) );
 				minuteEl.attr( 'max', '0' );
 			} else if ( minuteEl.data( 'default-max' ) ) {
 				minuteEl.attr( 'max', minuteEl.data( 'default-max' ) );
-				minuteEl.attr( 'maxlength', minuteEl.data( 'maxlength' ) );
 			}
 		},
 
@@ -5142,8 +5160,11 @@
 				return value;
 			};
 
-			hourInTwentyFourHourFormat = control.inputElements.ampm ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.ampm() ) : control.inputElements.hour();
-			dateFormat = [ 'year', '-', 'month', '-', 'day', ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ];
+			dateFormat = [ 'year', '-', 'month', '-', 'day' ];
+			if ( control.params.includeTime ) {
+				hourInTwentyFourHourFormat = control.inputElements.meridian ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.meridian() ) : control.inputElements.hour();
+				dateFormat = dateFormat.concat( [ ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ] );
+			}
 
 			_.each( dateFormat, function( component ) {
 				date += control.inputElements[ component ] ? getElementValue( component ) : component;
@@ -5167,18 +5188,21 @@
 		 * Convert hour in twelve hour format to twenty four hour format.
 		 *
 		 * @since 4.9.0
-		 * @param {string} hourInTwelveHourFormat Hour in twelve hour format.
-		 * @param {string} ampm am/pm
-		 * @return {string} Hour in twenty four hour format.
+		 * @param {string} hourInTwelveHourFormat - Hour in twelve hour format.
+		 * @param {string} meridian - Either 'am' or 'pm'.
+		 * @returns {string} Hour in twenty four hour format.
 		 */
-		convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, ampm ) {
+		convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) {
 			var hourInTwentyFourHourFormat, hour, midDayHour = 12;
 
 			hour = parseInt( hourInTwelveHourFormat, 10 );
+			if ( isNaN( hour ) ) {
+				return '';
+			}
 
-			if ( 'pm' === ampm && hour < midDayHour ) {
+			if ( 'pm' === meridian && hour < midDayHour ) {
 				hourInTwentyFourHourFormat = hour + midDayHour;
-			} else if ( 'am' === ampm && midDayHour === hour ) {
+			} else if ( 'am' === meridian && midDayHour === hour ) {
 				hourInTwentyFourHourFormat = hour - midDayHour;
 			} else {
 				hourInTwentyFourHourFormat = hour;
@@ -5196,7 +5220,7 @@
 		populateDateInputs: function populateDateInputs() {
 			var control = this, parsed;
 
-			parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
+			parsed = control.parseDateTime( control.setting.get() );
 
 			if ( ! parsed ) {
 				return false;
@@ -5245,8 +5269,6 @@
 	 */
 	api.PreviewLinkControl = api.Control.extend({
 
-		previewElements: {},
-
 		/**
 		 * Override the templateSelector before embedding the control into the page.
 		 *
@@ -5266,7 +5288,7 @@
 		 * @returns {void}
 		 */
 		ready: function ready() {
-			var control = this, element, component, node, link, input, button;
+			var control = this, element, component, node, url, input, button;
 
 			_.bindAll( control, 'updatePreviewLink' );
 
@@ -5274,6 +5296,8 @@
 			    control.setting = new api.Value();
 			}
 
+			control.previewElements = {};
+
 			control.container.find( '.preview-control-element' ).each( function() {
 				node = $( this );
 				component = node.data( 'component' );
@@ -5282,21 +5306,23 @@
 				control.elements.push( element );
 			} );
 
-			link = control.previewElements.link;
+			url = control.previewElements.url;
 			input = control.previewElements.input;
 			button = control.previewElements.button;
 
 			input.link( control.setting );
-			link.link( control.setting );
+			url.link( control.setting );
 
-			link.bind( function( value ) {
-				link.element.attr( 'href', value );
-				link.element.attr( 'target', api.settings.changeset.uuid );
+			url.bind( function( value ) {
+				url.element.parent().attr( {
+					href: value,
+					target: api.settings.changeset.uuid
+				} );
 			} );
 
 			api.bind( 'ready', control.updatePreviewLink );
-			api.bind( 'change', control.updatePreviewLink );
 			api.state( 'saved' ).bind( control.updatePreviewLink );
+			api.state( 'changesetStatus' ).bind( control.updatePreviewLink );
 
 			button.element.on( 'click', function( event ) {
 				event.preventDefault();
@@ -5307,8 +5333,8 @@
 				}
 			} );
 
-			link.element.on( 'click', function( event ) {
-				if ( link.element.hasClass( 'disabled' ) ) {
+			url.element.parent().on( 'click', function( event ) {
+				if ( $( this ).hasClass( 'disabled' ) ) {
 					event.preventDefault();
 				}
 			} );
@@ -5329,12 +5355,10 @@
 		updatePreviewLink: function updatePreviewLink() {
 			var control = this, unsavedDirtyValues;
 
-			unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
-				unsaved: true
-			} ) );
+			unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get();
 
 			control.toggleSaveNotification( unsavedDirtyValues );
-			control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
+			control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues );
 			control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
 			control.setting.set( api.previewer.getFrontendPreviewUrl() );
 		},
@@ -6508,9 +6532,7 @@
 						} );
 					} );
 
-					/**
-					 * Find all invalid setting less controls with notification type error.
-					 */
+					// Find all invalid setting less controls with notification type error.
 					api.control.each( function( control ) {
 						if ( ! control.setting || ! control.setting.id && control.active.get() ) {
 							control.notifications.each( function( notification ) {
@@ -7930,9 +7952,7 @@
 			});
 		})();
 
-		/**
-		 * Publish settings section and controls.
-		 */
+		// Publish settings section and controls.
 		api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
 			$.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
 				var radioNodes, statusElement, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index 6611a06d3c..4a6980c224 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -3622,18 +3622,20 @@ final class WP_Customize_Manager {
 			</ul>
 		</script>
 		<script type="text/html" id="tmpl-customize-preview-link-control" >
-			<span class="customize-control-title">
-				<label><?php esc_html_e( 'Share Preview Link' ); ?></label>
-			</span>
-			<span class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></span>
+			<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+			<p class="customize-control-title">
+				<?php esc_html_e( 'Share Preview Link' ); ?>
+			</p>
+			<p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
 			<div class="customize-control-notifications-container"></div>
 			<div class="preview-link-wrapper">
-				<label>
-					<span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
-					<a class="preview-control-element" data-component="link" href="" target=""></a>
-					<input readonly class="preview-control-element" data-component="input" value="test" >
-					<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
-				</label>
+				<label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
+				<a href="" target="">
+					<span class="preview-control-element" data-component="url"></span>
+					<span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
+				</a>
+				<input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+				<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
 			</div>
 		</script>
 		<script type="text/html" id="tmpl-customize-trash-changeset-control">
@@ -4236,6 +4238,7 @@ final class WP_Customize_Manager {
 		} else {
 			$initial_date = current_time( 'mysql', false );
 		}
+
 		$this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
 			'section' => 'publish_settings',
 			'priority' => 20,
@@ -4243,6 +4246,7 @@ final class WP_Customize_Manager {
 			'type' => 'date_time',
 			'min_year' => date( 'Y' ),
 			'allow_past_date' => false,
+			'include_time' => true,
 			'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
 			'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
 			'capability' => 'customize',
diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
index b2f91ceb5c..06228b2b74 100644
--- a/src/wp-includes/class-wp-customize-nav-menus.php
+++ b/src/wp-includes/class-wp-customize-nav-menus.php
@@ -674,13 +674,12 @@ final class WP_Customize_Nav_Menus {
 		) ) );
 
 		$this->manager->add_control( 'new_menu_name', array(
-			'label'       => '',
+			'label'       => __( 'New menu name' ),
 			'section'     => 'add_menu',
 			'type'        => 'text',
 			'settings'    => array(),
 			'input_attrs' => array(
 				'class'       => 'menu-name-field',
-				'placeholder' => __( 'New menu name' ),
 			),
 		) );
 
@@ -1017,7 +1016,8 @@ final class WP_Customize_Nav_Menus {
 					<?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
 					<?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
 						<div class="new-content-item">
-							<input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
+							<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
+							<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
 							<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
 						</div>
 					<?php endif; ?>
diff --git a/src/wp-includes/customize/class-wp-customize-date-time-control.php b/src/wp-includes/customize/class-wp-customize-date-time-control.php
index abcdc58833..9f36da0e68 100644
--- a/src/wp-includes/customize/class-wp-customize-date-time-control.php
+++ b/src/wp-includes/customize/class-wp-customize-date-time-control.php
@@ -48,6 +48,14 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 	 */
 	public $allow_past_date = true;
 
+	/**
+	 * Whether hours, minutes, and meridian should be shown.
+	 *
+	 * @since 4.9.0
+	 * @var boolean
+	 */
+	public $include_time = true;
+
 	/**
 	 * If set to false the control will appear in 24 hour format,
 	 * the value will still be saved in Y-m-d H:i:s format.
@@ -83,8 +91,9 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 
 		$data['maxYear'] = intval( $this->max_year );
 		$data['minYear'] = intval( $this->min_year );
-		$data['allowPastDate'] = $this->allow_past_date ? true : false;
-		$data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
+		$data['allowPastDate'] = (bool) $this->allow_past_date;
+		$data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
+		$data['includeTime'] = (bool) $this->include_time;
 		$data['defaultValue'] = $this->default_value;
 
 		return $data;
@@ -101,68 +110,58 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 		?>
 
 		<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
+		<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 
 		<span class="customize-control-title">
-			<label>{{ data.label }}</label>
+			{{ data.label }}
 		</span>
 		<div class="customize-control-notifications-container"></div>
 		<span class="description customize-control-description">{{ data.description }}</span>
 		<div class="date-time-fields">
-			<div class="day-row">
-				<span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
+			<fieldset class="day-row">
+				<legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
 				<div class="day-fields clear">
-					<label class="month-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
-							<select class="date-input month" data-component="month">
-								<# _.each( data.month_choices, function( choice ) {
-									if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
-										text = choice.text;
-										value = choice.value;
-									}
-									#>
-									<option value="{{ value }}" >
-										{{ text }}
-									</option>
-								<# } ); #>
-							</select>
-					</label>
-					<label class="day-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
-						<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
-					</label>
+					<label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
+					<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
+						<# _.each( data.month_choices, function( choice ) {
+							if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+								text = choice.text;
+								value = choice.value;
+							}
+							#>
+							<option value="{{ value }}" >
+								{{ text }}
+							</option>
+						<# } ); #>
+					</select>
+					<label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
+					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
 					<span class="time-special-char date-time-separator">,</span>
-					<label class="year-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
-						<# var maxYearLength = String( data.maxYear ).length; #>
-						<input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
-					</label>
+					<label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
+					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
 				</div>
-			</div>
-			<div class="time-row clear">
-				<span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
-				<div class="time-fields clear">
-					<label class="hour-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
+			</fieldset>
+			<# if ( data.includeTime ) { #>
+				<fieldset class="time-row clear">
+					<legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
+					<div class="time-fields clear">
+						<label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
 						<# var maxHour = data.twelveHourFormat ? 12 : 24; #>
-						<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
-					</label>
-					<span class="time-special-char date-time-separator">:</span>
-					<label class="minute-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
-						<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
-					</label>
-					<# if ( data.twelveHourFormat ) { #>
-					<label class="am-pm-field">
-						<span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
-						<select class="date-input" data-component="ampm">
-							<option value="am"><?php esc_html_e( 'AM' ); ?></option>
-							<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
-						</select>
-					</label>
-					<# } #>
-					<abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
-				</div>
-			</div>
+						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+						<span class="time-special-char date-time-separator">:</span>
+						<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
+						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+						<# if ( data.twelveHourFormat ) { #>
+							<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
+							<select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
+								<option value="am"><?php esc_html_e( 'AM' ); ?></option>
+								<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
+							</select>
+						<# } #>
+						<abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
+					</div>
+				</fieldset>
+			<# } #>
 		</div>
 		<?php
 	}
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 5ed4c7a02d..ce0d98d76a 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -872,86 +872,77 @@
 				</div>
 			<# } #>
 		</script>
-	<script type="text/html" id="tmpl-customize-control-date_time-content">
+		<script type="text/html" id="tmpl-customize-control-date_time-content">
 
-		<# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":69,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
+		<# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
+		<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 
 		<span class="customize-control-title">
-			<label>{{ data.label }}</label>
+			{{ data.label }}
 		</span>
 		<div class="customize-control-notifications-container"></div>
 		<span class="description customize-control-description">{{ data.description }}</span>
 		<div class="date-time-fields">
-			<div class="day-row">
-				<span class="title-day">Day</span>
+			<fieldset class="day-row">
+				<legend class="title-day">Date</legend>
 				<div class="day-fields clear">
-					<label class="month-field">
-						<span class="screen-reader-text">Month</span>
-						<select class="date-input month" data-component="month">
-							<# _.each( data.month_choices, function( choice ) {
-									if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
-									text = choice.text;
-									value = choice.value;
-									}
-									#>
-								<option value="{{ value }}" >
-									{{ text }}
-								</option>
-								<# } ); #>
-						</select>
-					</label>
-					<label class="day-field">
-						<span class="screen-reader-text">Day</span>
-						<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
-					</label>
+					<label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
+					<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
+						<# _.each( data.month_choices, function( choice ) {
+								if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+								text = choice.text;
+								value = choice.value;
+								}
+								#>
+							<option value="{{ value }}" >
+								{{ text }}
+							</option>
+						<# } ); #>
+					</select>
+					<label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
+					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
 					<span class="time-special-char date-time-separator">,</span>
-					<label class="year-field">
-						<span class="screen-reader-text">Year</span>
-						<# var maxYearLength = String( data.maxYear ).length; #>
-							<input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
-					</label>
+					<label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
+					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
 				</div>
-			</div>
-			<div class="time-row clear">
-				<span class="title-time">Time</span>
-				<div class="time-fields clear">
-					<label class="hour-field">
-						<span class="screen-reader-text">Hour</span>
+			</fieldset>
+			<# if ( data.includeTime ) { #>
+				<fieldset class="time-row clear">
+					<legend class="title-time">Time</legend>
+					<div class="time-fields clear">
+						<label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
 						<# var maxHour = data.twelveHourFormat ? 12 : 24; #>
-							<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
-					</label>
-					<span class="time-special-char date-time-separator">:</span>
-					<label class="minute-field">
-						<span class="screen-reader-text">Minute</span>
-						<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
-					</label>
-					<# if ( data.twelveHourFormat ) { #>
-						<label class="am-pm-field">
-							<span class="screen-reader-text">AM / PM</span>
-							<select class="date-input" data-component="ampm">
+						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+						<span class="time-special-char date-time-separator">:</span>
+						<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
+						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+						<# if ( data.twelveHourFormat ) { #>
+							<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
+							<select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
 								<option value="am">AM</option>
 								<option value="pm">PM</option>
 							</select>
-						</label>
 						<# } #>
-					<abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
-				</div>
-			</div>
+						<abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
+					</div>
+				</fieldset>
+			<# } #>
 		</div>
 	</script>
 	<script type="text/html" id="tmpl-customize-preview-link-control" >
-		<span class="customize-control-title">
-		<label>Share Preview Link</label>
-	</span>
-		<span class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</span>
+		<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+		<p class="customize-control-title">
+			Share Preview Link			</p>
+		<p class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</p>
 		<div class="customize-control-notifications-container"></div>
 		<div class="preview-link-wrapper">
-			<label>
-				<span class="screen-reader-text">Preview Link</span>
-				<a class="preview-control-element" data-component="link" href="" target=""></a>
-				<input readonly class="preview-control-element" data-component="input" value="test" >
-				<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
-			</label>
+			<label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
+			<a href="" target="">
+				<span class="preview-control-element" data-component="url"></span>
+				<span class="screen-reader-text">(opens in a new window)</span>
+			</a>
+			<input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+			<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
 		</div>
 	</script>
 	<script type="text/html" id="tmpl-media-modal">
diff --git a/tests/qunit/wp-admin/js/customize-controls.js b/tests/qunit/wp-admin/js/customize-controls.js
index aaa8c069cc..32b48127a2 100644
--- a/tests/qunit/wp-admin/js/customize-controls.js
+++ b/tests/qunit/wp-admin/js/customize-controls.js
@@ -702,7 +702,7 @@ jQuery( window ).load( function (){
 	test( 'Test DateTimeControl creation and its methods', function( assert ) {
 		var control, controlId = 'date_time', section, sectionId = 'fixture-section',
 			datetime = '2599-08-06 18:12:13', dateTimeArray, dateTimeArrayInampm, timeString,
-			day, year, month, minute, ampm, hour;
+			day, year, month, minute, meridian, hour;
 
 		section = wp.customize.section( sectionId );
 
@@ -710,6 +710,7 @@ jQuery( window ).load( function (){
 			params: {
 				section: section.id,
 				type: 'date_time',
+				includeTime: true,
 				content: '<li id="customize-control-' + controlId + '" class="customize-control"></li>',
 				defaultValue: datetime
 			}
@@ -728,15 +729,17 @@ jQuery( window ).load( function (){
 		year = control.inputElements.year;
 		minute = control.inputElements.minute;
 		hour = control.inputElements.hour;
-		ampm = control.inputElements.ampm;
+		meridian = control.inputElements.meridian;
 
 		year( '23' );
 		assert.equal( typeof year(), 'number', 'Should always return integer' );
 
+		month( '8' );
 		month( 'test' );
-		assert.notOk( month(), 'Should not accept text' );
+		assert.equal( 8, month(), 'Should not accept text' );
 
 		// Test control.parseDateTime();
+		control.params.twelveHourFormat = false;
 		dateTimeArray = control.parseDateTime( datetime );
 		assert.deepEqual( dateTimeArray, {
 			year: '2599',
@@ -747,13 +750,14 @@ jQuery( window ).load( function (){
 			day: '06'
 		} );
 
-		dateTimeArrayInampm = control.parseDateTime( datetime, true );
+		control.params.twelveHourFormat = true;
+		dateTimeArrayInampm = control.parseDateTime( datetime );
 		assert.deepEqual( dateTimeArrayInampm, {
 			year: '2599',
 			month: '08',
 			hour: '6',
 			minute: '12',
-			ampm: 'pm',
+			meridian: 'pm',
 			day: '06'
 		} );
 
@@ -762,16 +766,21 @@ jQuery( window ).load( function (){
 		day( '18' );
 		hour( '3' );
 		minute( '44' );
-		ampm( 'am' );
+		meridian( 'am' );
 
 		// Test control.convertInputDateToString().
 		timeString = control.convertInputDateToString();
 		assert.equal( timeString, '2010-12-18 03:44:00' );
 
-		ampm( 'pm' );
+		meridian( 'pm' );
 		timeString = control.convertInputDateToString();
 		assert.equal( timeString, '2010-12-18 15:44:00' );
 
+		control.params.includeTime = false;
+		timeString = control.convertInputDateToString();
+		assert.equal( timeString, '2010-12-18' );
+		control.params.includeTime = true;
+
 		// Test control.updateDaysForMonth();.
 		year( 2017 );
 		month( 2 );
@@ -796,11 +805,14 @@ jQuery( window ).load( function (){
 		assert.notOk( control.notifications.has( 'not_future_date' ) );
 
 		// Test control.populateDateInputs();
+		control.setting._value = '2000-12-30 12:34:56';
 		control.populateDateInputs();
-		control.dateInputs.each( function() {
-			var node = jQuery( this );
-		    assert.equal( node.val(), control.inputElements[ node.data( 'component' ) ].get() );
-		} );
+		assert.equal( '2000', control.inputElements.year.get() );
+		assert.equal( '12', control.inputElements.month.get() );
+		assert.equal( '30', control.inputElements.day.get() );
+		assert.equal( '12', control.inputElements.hour.get() );
+		assert.equal( '34', control.inputElements.minute.get() );
+		assert.equal( 'pm', control.inputElements.meridian.get() );
 
 		// Test control.validateInputs();
 		hour( 33 );
@@ -818,7 +830,7 @@ jQuery( window ).load( function (){
 		year( 2018 );
 		hour( 4 );
 		minute( 20 );
-		ampm( 'pm' );
+		meridian( 'pm' );
 		control.populateSetting();
 		assert.equal( control.setting(), '2018-11-02 16:20:00' );
 
@@ -836,7 +848,7 @@ jQuery( window ).load( function (){
 		year( 2318 );
 		hour( 4 );
 		minute( 20 );
-		ampm( 'pm' );
+		meridian( 'pm' );
 		assert.ok( control.isFutureDate() );
 
 		year( 2016 );
@@ -848,7 +860,7 @@ jQuery( window ).load( function (){
 		 */
 		hour( 24 );
 		minute( 32 );
-		control.inputElements.ampm = false; // Because it works only when the time is twenty four hour format.
+		control.inputElements.meridian = false; // Because it works only when the time is twenty four hour format.
 		control.updateMinutesForHour();
 		assert.deepEqual( minute(), 0 );
 
@@ -910,9 +922,9 @@ jQuery( window ).load( function (){
 					control.setting.set( newLink );
 
 					assert.equal( control.previewElements.input(), newLink );
-					assert.equal( control.previewElements.link(), newLink );
-					assert.equal( control.previewElements.link.element.attr( 'href' ), newLink );
-					assert.equal( control.previewElements.link.element.attr( 'target' ), wp.customize.settings.changeset.uuid );
+					assert.equal( control.previewElements.url(), newLink );
+					assert.equal( control.previewElements.url.element.parent().attr( 'href' ), newLink );
+					assert.equal( control.previewElements.url.element.parent().attr( 'target' ), wp.customize.settings.changeset.uuid );
 
 					// Test control.toggleSaveNotification().
 					control.toggleSaveNotification( true );