Changeset 60700

Timestamp:

09/01/2025 09:20:13 PM (3 months ago)

Author:

joedolson

Message:

Accessibility: Feedback & focus on deleting terms via AJAX.

When deleting a term using AJAX, notify screen reader users of the deletion using wp.a11y.speak(), set the active row to be unfocusable, then explicitly set new focus after the deletion is completed.

Props jeremyfelt, afercia, wido, nikunj8866, SirLouen, pmbaldha, joedolson.
Fixes #47101.

File:

• trunk/src/js/_enqueues/admin/tags.js (modified) (3 diffs)

trunk/src/js/_enqueues/admin/tags.js

@@ -31 +31 @@
         if ( r ) {
             data = t.attr('href').replace(/[^?]*\?/, '').replace(/action=delete/, 'action=delete-tag');
+
+            tr.children().css('backgroundColor', '#faafaa');
+
+            // Disable pointer events and all form controls/links in the row
+            tr.css('pointer-events', 'none');
+            tr.find(':input, a').prop('disabled', true).attr('tabindex', -1);
 
             /**
@@ -41 +47 @@
              */
             $.post(ajaxurl, data, function(r){
+                var message;
                 if ( '1' == r ) {
                     $('#ajax-response').empty();
+                    let nextFocus = tr.next( 'tr' ).find( 'a.row-title' );
+                    let prevFocus = tr.prev( 'tr' ).find( 'a.row-title' );
+                    // If there is neither a next row or a previous row, focus the tag input field.
+                    if ( nextFocus.length < 1 && prevFocus.length < 1 ) {
+                        nextFocus = $( '#tag-name' ).trigger( 'focus' );
+                    } else {
+                        if ( nextFocus.length < 1 ) {
+                            nextFocus = prevFocus;
+                        }
+                    }
+
                     tr.fadeOut('normal', function(){ tr.remove(); });
 
@@ -54 +72 @@
                     $('select#parent option[value="' + data.match(/tag_ID=(\d+)/)[1] + '"]').remove();
                     $('a.tag-link-' + data.match(/tag_ID=(\d+)/)[1]).remove();
-
+                    nextFocus.trigger( 'focus' );
+                    message = wp.i18n.__( 'The selected tag has been deleted.' );
+            
                 } else if ( '-1' == r ) {
-                    $('#ajax-response').empty().append('<div class="notice notice-error"><p>' + wp.i18n.__( 'Sorry, you are not allowed to do that.' ) + '</p></div>');
-                    tr.children().css('backgroundColor', '');
+                    message = wp.i18n.__( 'Sorry, you are not allowed to do that.' );
+                    $('#ajax-response').empty().append('<div class="notice notice-error"><p>' + message + '</p></div>');
+                    resetRowAfterFailure( tr );
 
                 } else {
-                    $('#ajax-response').empty().append('<div class="notice notice-error"><p>' + wp.i18n.__( 'An error occurred while processing your request. Please try again later.' ) + '</p></div>');
-                    tr.children().css('backgroundColor', '');
+                    message = wp.i18n.__( 'An error occurred while processing your request. Please try again later.' );
+                    $('#ajax-response').empty().append('<div class="notice notice-error"><p>' + message + '</p></div>');
+                    resetRowAfterFailure( tr );
                 }
+                wp.a11y.speak( message, 'assertive' );
             });
-
-            tr.children().css('backgroundColor', '#f33');
         }
 
         return false;
     });
+
+    /**
+     * Restores the original UI state of a table row after an AJAX failure.
+     *
+     * @param {jQuery} tr The table row to reset.
+     * @return {void}
+     */
+    function resetRowAfterFailure( tr ) {
+        tr.children().css( 'backgroundColor', '' );
+        tr.css( 'pointer-events', '' );
+        tr.find( ':input, a' ).prop( 'disabled', false ).removeAttr( 'tabindex' );
+    }
 
     /**