From d65a1136dfbc387c7d89509b6fb9aec04b2269d3 Mon Sep 17 00:00:00 2001 From: jeremiahbratton Date: Tue, 26 Aug 2025 14:38:54 -0700 Subject: [PATCH 1/7] Grabbing input error span and applying invalidity classes and attributes if a page title is not supplied. --- src/js/_enqueues/wp/customize/controls.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index bc72f589c7203..9c547cb460b5d 100644 --- a/src/js/_enqueues/wp/customize/controls.js +++ b/src/js/_enqueues/wp/customize/controls.js @@ -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.show(); + wp.a11y.speak( inputError.text() ); return; } - input.removeClass( 'invalid' ); + input.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, From 2e004c3653365a6fce03859ed29cd22ea0e38611 Mon Sep 17 00:00:00 2001 From: jeremiahbratton Date: Tue, 26 Aug 2025 14:39:13 -0700 Subject: [PATCH 2/7] Removing redundant error CSS from a previous patch --- src/wp-admin/css/customize-controls.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index f39f838b6fb0d..4ddc461f8618f 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1161,10 +1161,6 @@ p.customize-section-description { flex-grow: 1; } -.customize-control-dropdown-pages .new-content-item .create-item-input.invalid { - border: 1px solid #d63638; -} - .customize-control-dropdown-pages .add-new-toggle { margin-left: 1px; font-weight: 600; From 50128278157437d4f1ecfa0a418c3100d28a83b0 Mon Sep 17 00:00:00 2001 From: jeremiahbratton Date: Tue, 26 Aug 2025 14:40:41 -0700 Subject: [PATCH 3/7] Adding input error message and adding style class for required fields --- src/wp-includes/class-wp-customize-control.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index 83bf90ac6d8f4..04ab5b20e502e 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/wp-includes/class-wp-customize-control.php @@ -646,9 +646,11 @@ protected function render_content() {
- +
+ +
Date: Tue, 26 Aug 2025 16:10:11 -0700 Subject: [PATCH 4/7] Declaring inputError --- src/js/_enqueues/wp/customize/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index 9c547cb460b5d..488ad77dffbe5 100644 --- a/src/js/_enqueues/wp/customize/controls.js +++ b/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; From d84b835be6608a206f7a974c1de9211f42e2099a Mon Sep 17 00:00:00 2001 From: jeremiahbratton Date: Tue, 26 Aug 2025 16:26:39 -0700 Subject: [PATCH 5/7] Revert "Removing redundant error CSS from a previous patch" This reverts commit 2e004c3653365a6fce03859ed29cd22ea0e38611. --- src/wp-admin/css/customize-controls.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 4ddc461f8618f..f39f838b6fb0d 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1161,6 +1161,10 @@ p.customize-section-description { flex-grow: 1; } +.customize-control-dropdown-pages .new-content-item .create-item-input.invalid { + border: 1px solid #d63638; +} + .customize-control-dropdown-pages .add-new-toggle { margin-left: 1px; font-weight: 600; From f269519e8cb6182eee31f18aeb5c128837d6848d Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Wed, 3 Sep 2025 23:52:22 -0500 Subject: [PATCH 6/7] Extend UX changes to also cover Add New in nav menus --- src/js/_enqueues/wp/customize/nav-menus.js | 14 ++++++++++---- src/wp-includes/class-wp-customize-nav-menus.php | 4 +++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/js/_enqueues/wp/customize/nav-menus.js b/src/js/_enqueues/wp/customize/nav-menus.js index f193d5463bfe4..392b358c519b4 100644 --- a/src/js/_enqueues/wp/customize/nav-menus.js +++ b/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' ); } diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php index f6d1c5af9e6e1..3a41d764e2396 100644 --- a/src/wp-includes/class-wp-customize-nav-menus.php +++ b/src/wp-includes/class-wp-customize-nav-menus.php @@ -1237,9 +1237,11 @@ protected function print_post_type_container( $available_item_type ) {
- +
+ +
From e951fd54d7adea6b863b44038b82b1790f4b1887 Mon Sep 17 00:00:00 2001 From: jeremiahbratton Date: Fri, 5 Sep 2025 13:12:39 -0700 Subject: [PATCH 7/7] Replacing .show() with .slideDown('fast') to align with other UI styles within customizer. Retargeting form-invalid class removal from input to input container --- src/js/_enqueues/wp/customize/controls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index 488ad77dffbe5..7f400dc8e9492 100644 --- a/src/js/_enqueues/wp/customize/controls.js +++ b/src/js/_enqueues/wp/customize/controls.js @@ -4083,12 +4083,12 @@ container.addClass( 'form-invalid' ); input.attr('aria-invalid', 'true'); input.attr('aria-describedby', inputError.attr('id')); - inputError.show(); + inputError.slideDown( 'fast' ); wp.a11y.speak( inputError.text() ); return; } - input.removeClass( 'form-invalid' ); + container.removeClass( 'form-invalid' ); input.attr('aria-invalid', 'false'); input.removeAttr('aria-describedby'); inputError.hide();