Changeset 58455 for trunk/src/js/_enqueues/lib/ajax-response.js

Timestamp:

06/21/2024 06:15:50 PM (5 weeks ago)

Author:

joedolson

Message:

Administration: A11y: Add role="alert" on JS injected admin notices.

Add the attribute role="alert" on 12 instances of admin notices that are injected into the DOM using JavaScript. The role="alert" attribute allows screen readers to recognize the addition to the DOM and announce the errors to users.

Props afercia, cyrus11, rcreators, joedolson.
Fixes #47111.

File:

• trunk/src/js/_enqueues/lib/ajax-response.js (modified) (2 diffs)

trunk/src/js/_enqueues/lib/ajax-response.js

@@ -54 +54 @@
             } );
             if ( err.length ) {
-                re.html( '<div class="notice notice-error">' + err + '</div>' );
+                re.html( '<div class="notice notice-error">' + err + '</div>' );
                 wp.a11y.speak( err );
             } else if ( noticeMessage.length ) {
-                re.html( '<div class="notice notice-success is-dismissible"><p>' + noticeMessage + '</p></div>');
+                re.html( '<div class="notice notice-success is-dismissible"><p>' + noticeMessage + '</p></div>');
                 jQuery(document).trigger( 'wp-updates-notice-added' );
                 wp.a11y.speak( noticeMessage );
@@ -65 +65 @@
         if ( isNaN( x ) ) {
             wp.a11y.speak( x );
-            return ! re.html( '<div class="notice notice-error"><p>' + x + '</p></div>' );
+            return ! re.html( '<div class="notice notice-error"><p>' + x + '</p></div>' );
         }
         x = parseInt( x, 10 );
         if ( -1 === x ) {
             wp.a11y.speak( wpAjax.noPerm );
-            return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.noPerm + '</p></div>' );
+            return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.noPerm + '</p></div>' );
         } else if ( 0 === x ) {
             wp.a11y.speak( wpAjax.broken );
-            return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.broken  + '</p></div>' );
+            return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.broken  + '</p></div>' );
         }
         return true;