diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index bc72f589c7203..7f400dc8e9492 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; @@ -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, 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-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() {
- +
+ +
- +
+ +