Skip to content

Commit

Permalink
Add featured image alt text (#66189)
Browse files Browse the repository at this point in the history
* Add featured image alt text

* Updated duplicate code to function.

* Modify doc

* Minor adjustments for the docblock.

---------

Co-authored-by: prajapatisagar <sagarprajapati@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
  • Loading branch information
3 people authored Oct 18, 2024
1 parent 388dd81 commit 9d2b320
Showing 1 changed file with 31 additions and 16 deletions.
47 changes: 31 additions & 16 deletions packages/editor/src/components/post-featured-image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,35 @@ function PostFeaturedImage( {
} );
}

/**
* Generates the featured image alt text for this editing context.
*
* @param {Object} imageMedia The image media object.
* @param {string} imageMedia.alt_text The alternative text of the image.
* @param {Object} imageMedia.media_details The media details of the image.
* @param {Object} imageMedia.media_details.sizes The sizes of the image.
* @param {Object} imageMedia.media_details.sizes.full The full size details of the image.
* @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
* @param {string} imageMedia.slug The slug of the image.
* @return {string} The featured image alt text.
*/
function getImageDescription( imageMedia ) {
if ( imageMedia.alt_text ) {
return sprintf(
// Translators: %s: The selected image alt text.
__( 'Current image: %s' ),
imageMedia.alt_text
);
}
return sprintf(
// Translators: %s: The selected image filename.
__(
'The current image has no alternative text. The file name is: %s'
),
imageMedia.media_details.sizes?.full?.file || imageMedia.slug
);
}

return (
<PostFeaturedImageCheck>
{ noticeUI }
Expand All @@ -130,21 +159,7 @@ function PostFeaturedImage( {
id={ `editor-post-featured-image-${ featuredImageId }-describedby` }
className="hidden"
>
{ media.alt_text &&
sprintf(
// Translators: %s: The selected image alt text.
__( 'Current image: %s' ),
media.alt_text
) }
{ ! media.alt_text &&
sprintf(
// Translators: %s: The selected image filename.
__(
'The current image has no alternative text. The file name is: %s'
),
media.media_details.sizes?.full?.file ||
media.slug
) }
{ getImageDescription( media ) }
</div>
) }
<MediaUploadCheck fallback={ instructions }>
Expand Down Expand Up @@ -188,7 +203,7 @@ function PostFeaturedImage( {
<img
className="editor-post-featured-image__preview-image"
src={ mediaSourceUrl }
alt=""
alt={ getImageDescription( media ) }
/>
) }
{ isLoading && <Spinner /> }
Expand Down

0 comments on commit 9d2b320

Please sign in to comment.