Changeset 58455

Timestamp:

06/21/2024 06:15:50 PM (9 months 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.

Location:

trunk/src/js/_enqueues

Files:

• admin/privacy-tools.js (modified) (1 diff)
• admin/user-profile.js (modified) (2 diffs)
• lib/ajax-response.js (modified) (2 diffs)
• wp/customize/widgets.js (modified) (1 diff)
• wp/updates.js (modified) (2 diffs)
• wp/widgets/custom-html.js (modified) (1 diff)
• wp/widgets/media.js (modified) (1 diff)

trunk/src/js/_enqueues/admin/privacy-tools.js

@@ -48 +48 @@
         $requestRow.after( function() {
             return '<tr class="' + resultRowClasses + '"><th colspan="5">' +
-                '<div class="notice inline notice-alt ' + classes + '">' +
+                '<div class="notice inline notice-alt ' + classes + '" role="alert">' +
                 '<p>' + summaryMessage + '</p>' +
                 itemList +

trunk/src/js/_enqueues/admin/user-profile.js

@@ -152 +152 @@
      */
     function addInlineNotice( $this, success, message ) {
-        var resultDiv = $( '<div />' );
+        var resultDiv = $( '<div />', {
+            role: 'alert'
+        } );
 
         // Set up the notice div.
@@ -475 +477 @@
             $this.prop( 'disabled', true );
             $this.siblings( '.notice' ).remove();
-            $this.before( '<div class="notice notice-success inline"><p>' + response.message + '</p></div>' );
+            $this.before( '<div class="notice notice-success inline" role="alert"><p>' + response.message + '</p></div>' );
         }).fail( function( response ) {
             $this.siblings( '.notice' ).remove();
-            $this.before( '<div class="notice notice-error inline"><p>' + response.message + '</p></div>' );
+            $this.before( '<div class="notice notice-error inline" role="alert"><p>' + response.message + '</p></div>' );
         });
 

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" role="alert">' + 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" role="alert"><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" role="alert"><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" role="alert"><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" role="alert"><p>' + wpAjax.broken  + '</p></div>' );
         }
         return true;

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

@@ -1624 +1624 @@
                 // @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
                 noticeContainer = $( '<div></div>', {
-                    'class': 'no-widget-areas-rendered-notice'
+                    'class': 'no-widget-areas-rendered-notice',
+                    'role': 'alert'
                 });
                 panelMetaContainer.append( noticeContainer );

trunk/src/js/_enqueues/wp/updates.js

@@ -876 +876 @@
         $card
             .addClass( 'plugin-card-update-failed' )
-            .append( '<div class="notice notice-error notice-alt is-dismissible"><p>' + errorMessage + '</p></div>' );
+            .append( '<div class="notice notice-error notice-alt is-dismissible" role="alert"><p>' + errorMessage + '</p></div>' );
 
         $card.on( 'click', '.notice.is-dismissible .notice-dismiss', function() {
@@ -2261 +2261 @@
         // Remove any existing error.
         $filesystemForm.find( '.notice' ).remove();
-        $filesystemForm.find( '#request-filesystem-credentials-title' ).after( '<div class="notice notice-alt notice-error"><p>' + message + '</p></div>' );
+        $filesystemForm.find( '#request-filesystem-credentials-title' ).after( '<div class="notice notice-alt notice-error" role="alert"><p>' + message + '</p></div>' );
     };
 

trunk/src/js/_enqueues/wp/widgets/custom-html.js

@@ -149 +149 @@
                 }
             } else if ( 0 !== errorAnnotations.length ) {
-                errorNotice = $( '<div class="inline notice notice-error notice-alt"></div>' );
+                errorNotice = $( '<div class="inline notice notice-error notice-alt" role="alert"></div>' );
                 errorNotice.append( $( '<p></p>', {
                     text: message

trunk/src/js/_enqueues/wp/widgets/media.js

@@ -159 +159 @@
                         } else {
                             if ( ! noticeContainer.length ) {
-                                noticeContainer = $( '<div class="media-widget-embed-notice notice notice-error notice-alt"></div>' );
+                                noticeContainer = $( '<div class="media-widget-embed-notice notice notice-error notice-alt" role="alert"></div>' );
                                 noticeContainer.hide();
                                 embedLinkView.views.parent.$el.prepend( noticeContainer );