Add proper translated alt text to saved images

src/components/AddImages/AddImages.example.js

@@ -61,7 +61,11 @@ class AddImagesTest extends Component {
   render() {
     return (
       <div>
-        <AddImages images={this.state.images} onSortEnd={this.onSortEnd}>
+        <AddImages
+          images={this.state.images}
+          onSortEnd={this.onSortEnd}
+          savedImageAltText="Saved image"
+        >
           <div className={css.addImageWrapper}>
             <div className={css.aspectRatioWrapper}>
               <label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>

src/components/AddImages/AddImages.js

@@ -79,7 +79,7 @@ Thumbnail.propTypes = {
 };
 
 const ThumbnailWrapper = props => {
-  const { className, image } = props;
+  const { className, image, savedImageAltText } = props;
   if (image.file) {
     return <Thumbnail className={className} {...image} />;
   } else {
@@ -91,7 +91,7 @@ const ThumbnailWrapper = props => {
             <ResponsiveImage
               rootClassName={css.rootForImage}
               image={image}
-              alt="TODO: alt text"
+              alt={savedImageAltText}
               nameSet={[
                 { name: 'landscape-crop', size: '400w' },
                 { name: 'landscape-crop2x', size: '800w' },
@@ -110,6 +110,7 @@ ThumbnailWrapper.defaultProps = { className: null };
 ThumbnailWrapper.propTypes = {
   className: string,
   image: object.isRequired,
+  savedImageAltText: string.isRequired,
 };
 
 // Sorting is disabled temporarily.
@@ -127,7 +128,7 @@ const SortableImage = ThumbnailWrapper;
 
 // Create container where there are sortable images and passed children like "Add image" input etc.
 const SortableImages = SortableContainer(props => {
-  const { children, className, thumbnailClassName, images } = props;
+  const { children, className, thumbnailClassName, images, savedImageAltText } = props;
   const classes = classNames(css.root, className);
   return (
     <div className={classes}>
@@ -138,6 +139,7 @@ const SortableImages = SortableContainer(props => {
             index={index}
             key={image.id.uuid || image.id}
             className={thumbnailClassName}
+            savedImageAltText={savedImageAltText}
           />
         );
       })}
@@ -161,6 +163,7 @@ AddImages.propTypes = {
   className: string,
   thumbnailClassName: string,
   onSortEnd: func.isRequired,
+  savedImageAltText: string.isRequired,
 };
 
 export default AddImages;

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -144,6 +144,7 @@ export class EditListingPhotosFormComponent extends Component {
           images={images}
           onSortEnd={this.onSortEnd}
           thumbnailClassName={css.thumbnail}
+          savedImageAltText={intl.formatMessage({ id: 'EditListingPhotosForm.savedImageAltText' })}
         >
           <Field
             id="EditListingPhotosForm.AddImages"

src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap

@@ -6,6 +6,7 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
     className={null}
     images={Array []}
     onSortEnd={[Function]}
+    savedImageAltText="EditListingPhotosForm.savedImageAltText"
     thumbnailClassName={null}>
     <Field
       accept="image/*"

src/translations/en.json

@@ -72,6 +72,7 @@
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
   "EditListingPhotosForm.imageTypes": ".JPG, .GIF or .PNG max. 10 MB",
   "EditListingPhotosForm.imageUploadFailed.uploadOverLimit": " Image was too big. Maximum size is 10 MB.",
+  "EditListingPhotosForm.savedImageAltText": "Saved listing image",
   "EditListingPhotosForm.showListingFailed": "Fetching listing data failed",
   "EditListingPhotosForm.updateFailed": "Failed to update listing. Please try again.",
   "EditListingPhotosForm.updated": "Updated!",