Changeset 61616

Timestamp:

02/12/2026 01:50:20 AM (8 months ago)

Author:

joedolson

Message:

Editor: A11y: Fix featured image control naming.

The controls to set and remove a featured image in the Classic Editor use a link with no attributes to identify purpose. Triggering a modal dialog should be done using a button with proper identification.

Add role="button", aria-haspopup="dialog", and aria-controls attributes to give users appropriate information about the control behavior. Add keypress handlers for button-specific keyboard events.

Does not use a button element to avoid interfering with style customizations.

Props alh0319, joedolson, mukesh27, huzaifaalmesbah.
Fixes #63980.

Location:

trunk/src

Files:

• js/_enqueues/wp/media/editor.js (modified) (1 diff)
• wp-admin/includes/post.php (modified) (2 diffs)

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

@@ -704 +704 @@
                  */
                 init: function() {
-                        $('#postimagediv').on( 'click', '#set-post-thumbnail', function( event ) {
-                                event.preventDefault();
-                                // Stop propagation to prevent thickbox from activating.
-                                event.stopPropagation();
-
-                                wp.media.featuredImage.frame().open();
-                        }).on( 'click', '#remove-post-thumbnail', function() {
-                                wp.media.featuredImage.remove();
-                                return false;
+                        $('#postimagediv').on( 'click keyup keydown', '#set-post-thumbnail', function( event ) {
+                                if ( ( event.type === 'keyup' && event.key === ' ' ) || ( event.type === 'keydown' && event.key === 'Enter' ) || event.type === 'click' ) {
+                                        event.preventDefault();
+                                        // Stop propagation to prevent thickbox from activating.
+                                        event.stopPropagation();
+
+                                        wp.media.featuredImage.frame().open();
+                                }
+                        }).on( 'click keyup keydown', '#remove-post-thumbnail', function( event ) {
+                                if ( ( event.type === 'keyup' && event.key === ' ' ) || ( event.type === 'keydown' && event.key === 'Enter' ) || event.type === 'click' ) {
+                                        wp.media.featuredImage.remove();
+                                        return false;
+                                }
                         });
                 }

trunk/src/wp-admin/includes/post.php

@@ -1645 +1645 @@
         $post               = get_post( $post );
         $post_type_object   = get_post_type_object( $post->post_type );
-        $set_thumbnail_link = '<p class="hide-if-no-js"><a href="%s" id="set-post-thumbnail"%s class="thickbox">%s</a></p>';
+        $set_thumbnail_link = '<p class="hide-if-no-js"><a href="%s" id="set-post-thumbnail"%s class="thickbox" role="button" aria-haspopup="dialog" aria-controls="wp-media-modal">%s</a></p>';
         $upload_iframe_src  = get_upload_iframe_src( 'image', $post->ID );
 
@@ -1684 +1684 @@
                         );
                         $content .= '<p class="hide-if-no-js howto" id="set-post-thumbnail-desc">' . __( 'Click the image to edit or update' ) . '</p>';
-                        $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</a></p>';
+                        $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" role="button">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</a></p>';
                 }
         }