Customizer: Accessible errors when adding new pages.

When setting the home page settings or dynamically adding new pages in the menu manager, the error messages didn't meet accessibility standards.

Add a screen reader announcement, a visible notification, and standardize the error styles.

Props dilipbheda, dlh, celloexpressions, joedolson, jeremiahbratton, shailu25.
Fixes #50696.

git-svn-id: https://develop.svn.wordpress.org/trunk@60715 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/js/_enqueues/wp/customize/controls.js

@@ -4066,7 +4066,7 @@
 		 * @return {void}
 		 */
 		addNewPage: function () {
-			var control = this, promise, toggle, container, input, title, select;
+			var control = this, promise, toggle, container, input, inputError, title, select;
 
 			if ( 'dropdown-pages' !== control.params.type || ! control.params.allow_addition || ! api.Menus ) {
 				return;
@@ -4075,15 +4075,23 @@
 			toggle = control.container.find( '.add-new-toggle' );
 			container = control.container.find( '.new-content-item-wrapper' );
 			input = control.container.find( '.create-item-input' );
+			inputError = control.container.find('.create-item-error');
 			title = input.val();
 			select = control.container.find( 'select' );
 
 			if ( ! title ) {
-				input.addClass( 'invalid' );
+				container.addClass( 'form-invalid' );
+				input.attr('aria-invalid', 'true');
+				input.attr('aria-describedby', inputError.attr('id'));
+				inputError.slideDown( 'fast' );
+				wp.a11y.speak( inputError.text() );
 				return;
 			}
 
-			input.removeClass( 'invalid' );
+			container.removeClass( 'form-invalid' );
+			input.attr('aria-invalid', 'false');
+			input.removeAttr('aria-describedby');
+			inputError.hide();
 			input.attr( 'disabled', 'disabled' );
 
 			// The menus functions add the page, publish when appropriate,

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-control.php

@@ -646,9 +646,11 @@ protected function render_content() {
 					<div class="new-content-item-wrapper">
 						<label for="create-input-<?php echo esc_attr( $this->id ); ?>"><?php _e( 'New page title' ); ?></label>
 						<div class="new-content-item">
-							<input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" >
+							<input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" 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( $this->id ); ?>-error" class="create-item-error error-message" style="display: none;"><?php _e( 'Please enter a page title' ); ?></span>
+
 					</div>
 				<?php endif; ?>
 				<?php

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; ?>