Extend UX changes to also cover Add New in nav menus

Author: joedolson

src/js/_enqueues/wp/customize/nav-menus.js

@@ -661,6 +661,7 @@
 				itemType = dataContainer.data( 'type' ),
 				itemObject = dataContainer.data( 'object' ),
 				itemTypeLabel = dataContainer.data( 'type_label' ),
+				inputError = container.find('.create-item-error'),
 				promise;
 
 			if ( ! this.currentMenuControl ) {
@@ -671,13 +672,18 @@
 			if ( 'post_type' !== itemType ) {
 				return;
 			}
-
 			if ( '' === itemName.val().trim() ) {
-				itemName.addClass( 'invalid' );
-				itemName.focus();
+				container.addClass( 'form-invalid' );
+				itemName.attr('aria-invalid', 'true');
+				itemName.attr('aria-describedby', inputError.attr('id'));
+				inputError.slideDown( 'fast' );
+				wp.a11y.speak( inputError.text() );
 				return;
 			} else {
-				itemName.removeClass( 'invalid' );
+				container.removeClass( 'form-invalid' );
+				itemName.attr('aria-invalid', 'false');
+				itemName.removeAttr('aria-describedby');
+				inputError.hide();
 				container.find( '.accordion-section-title' ).addClass( 'loading' );
 			}
 

src/wp-includes/class-wp-customize-nav-menus.php

@@ -1237,9 +1237,11 @@ protected function print_post_type_container( $available_item_type ) {
 						<div class="new-content-item-wrapper">
 							<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
 							<div class="new-content-item">
-								<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input">
+								<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input form-required">
 								<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
 							</div>
+							<span id="create-input-<?php echo esc_attr( $available_item_type['object'] ); ?>-error" class="create-item-error error-message" style="display: none;"><?php _e( 'Please enter an item title' ); ?></span>
+
 						</div>
 					<?php endif; ?>
 				<?php endif; ?>