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.

git-svn-id: https://develop.svn.wordpress.org/trunk@61616 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

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

@@ -703,15 +703,19 @@
 		 * Update the featured image id when the 'remove' link is clicked.
 		 */
 		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;
+				}
 			});
 		}
 	};

src/wp-admin/includes/post.php

@@ -1644,7 +1644,7 @@ function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
 
 	$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 );
 
 	$content = sprintf(
@@ -1683,7 +1683,7 @@ function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
 				$thumbnail_html
 			);
 			$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>';
 		}
 	}