Changeset 60715

Timestamp:

09/07/2025 02:45:32 AM (2 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/wp/customize/controls.js (modified) (2 diffs)
• js/_enqueues/wp/customize/nav-menus.js (modified) (2 diffs)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)
• wp-includes/class-wp-customize-nav-menus.php (modified) (1 diff)

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

@@ -4067 +4067 @@
          */
         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 ) {
@@ -4076 +4076 @@
             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' );
 

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

@@ -662 +662 @@
                 itemObject = dataContainer.data( 'object' ),
                 itemTypeLabel = dataContainer.data( 'type_label' ),
+                inputError = container.find('.create-item-error'),
                 promise;
 
@@ -672 +673 @@
                 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' );
             }

trunk/src/wp-includes/class-wp-customize-control.php

@@ -647 +647 @@
                         <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; ?>

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

@@ -1238 +1238 @@
                             <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; ?>