Merge pull request #608 from greenpeace/planet-5757

PLANET-5757 Add image title attribute
greenpeace · Jun 15, 2021 · 9789312 · 9789312
2 parents 453dfa0 + ffb9344
commit 9789312
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 11 deletions.
diff --git a/assets/src/blocks/Columns/Columns.js b/assets/src/blocks/Columns/Columns.js
@@ -47,9 +47,9 @@ export const Columns = ({ columns, columns_block_style, isCampaign, isExample =
                     data-ga-action={columns_block_style === LAYOUT_ICONS ? 'Icon' : 'Image'}
                     data-ga-label={cta_link}
                   >
-                    <img src={attachment} alt={title} loading='lazy' />
+                    <img src={attachment} alt={title} title={title} loading='lazy' />
                   </a> :
-                  <img src={attachment} alt={title} loading='lazy' />
+                  <img src={attachment} alt={title} title={title} loading='lazy' />
                 }
               </div>
             }

diff --git a/assets/src/blocks/Covers/CampaignCovers.js b/assets/src/blocks/Covers/CampaignCovers.js
@@ -33,6 +33,7 @@ export const CampaignCovers = ({ covers, initialRowsLimit, row, loadMoreCovers }
                       srcSet={src_set}
                       src={image[0]}
                       alt={alt_text}
+                      title={alt_text}
                     />
                   }
                   <span className='yellow-cta'><span aria-label='hashtag'>#</span>{name}</span>

diff --git a/assets/src/blocks/Covers/ContentCovers.js b/assets/src/blocks/Covers/ContentCovers.js
@@ -57,6 +57,7 @@ export const ContentCovers = ({ covers, initialRowsLimit, row, loadMoreCovers })
                           loading='lazy'
                           src={thumbnail}
                           alt={alt_text}
+                          title={alt_text}
                           srcSet={srcset}
                           sizes={IMAGE_SIZES.content}
                         />

diff --git a/assets/src/blocks/Gallery/GalleryCarousel.js b/assets/src/blocks/Gallery/GalleryCarousel.js
@@ -98,6 +98,7 @@ export const GalleryCarousel = ({ images, onImageClick }) => {
               sizes={IMAGE_SIZES.carousel}
               style={{ objectPosition: image.focus_image }}
               alt={image.alt_text}
+              title={image.alt_text}
               onClick={() => {
                 onImageClick(index);
               }}

diff --git a/assets/src/blocks/Gallery/GalleryGrid.js b/assets/src/blocks/Gallery/GalleryGrid.js
@@ -12,6 +12,7 @@ export const GalleryGrid = ({ images, onImageClick }) => (
             sizes={IMAGE_SIZES.grid}
             style={{ objectPosition: image.focus_image }}
             alt={image.alt_text}
+            title={image.alt_text}
             onClick={() => {
               onImageClick(index);
             }}

diff --git a/assets/src/blocks/Gallery/GalleryThreeColumns.js b/assets/src/blocks/Gallery/GalleryThreeColumns.js
@@ -15,6 +15,7 @@ export const GalleryThreeColumns = ({ images, postType, onImageClick }) => (
               sizes={IMAGE_SIZES[`threeColumns${index}`]}
               style={{ objectPosition: image.focus_image }}
               alt={image.alt_text}
+              title={image.alt_text}
               className={`img_${postType}`}
               onClick={() => {
                 onImageClick(index);

diff --git a/assets/src/blocks/Splittwocolumns/SplittwocolumnsFrontend.js b/assets/src/blocks/Splittwocolumns/SplittwocolumnsFrontend.js
@@ -35,7 +35,8 @@ export const SplittwocolumnsFrontend = ({
           <div className="split-two-column-item-image">
             <img src={issue_image_src}
                  srcSet={issue_image_srcset}
-                 alt={issue_image_title || ''}
+                 alt={issue_image_title}
+                 title={issue_image_title}
                  style={{objectPosition: focus_issue_image}}
                  sizes={IMAGE_SIZES.columnLeft}
             />
@@ -71,7 +72,8 @@ export const SplittwocolumnsFrontend = ({
           <div className="split-two-column-item-image">
             <img src={tag_image_src}
                  srcSet={tag_image_srcset}
-                 alt={tag_image_title || ''}
+                 alt={tag_image_title}
+                 title={tag_image_title}
                  style={{objectPosition: focus_tag_image}}
                  sizes={IMAGE_SIZES.columnRight}
             />

diff --git a/assets/src/blocks/Splittwocolumns/SplittwocolumnsInPlaceEdit.js b/assets/src/blocks/Splittwocolumns/SplittwocolumnsInPlaceEdit.js
@@ -42,7 +42,8 @@ export const SplittwocolumnsInPlaceEdit = ({attributes, charLimit, setAttributes
           <div className="split-two-column-item-image">
             <img
               src={issue_image_src}
-              alt={issue_image_title || ''}
+              alt={issue_image_title}
+              title={issue_image_title}
               style={{objectPosition: focus_issue_image}}
             />
           </div>
@@ -92,7 +93,8 @@ export const SplittwocolumnsInPlaceEdit = ({attributes, charLimit, setAttributes
           <div className="split-two-column-item-image">
             <img
               src={tag_image_src}
-              alt={tag_image_title || ''}
+              alt={tag_image_title}
+              title={tag_image_title}
               style={{objectPosition: focus_tag_image}}
             />
           </div>

diff --git a/templates/blocks/campaign_covers.twig b/templates/blocks/campaign_covers.twig
@@ -36,7 +36,7 @@
 								aria-label="{{ __( 'Check our campaign about ' ~ tag.name, 'planet4-blocks') }}">
 									<div class="thumbnail-large">
 										{% if ( tag.image[0] ) %}
-											<img src="{{ tag.image[0] }}" alt="{{ tag.alt_text }}">
+											<img src="{{ tag.image[0] }}" alt="{{ tag.alt_text }}" title="{{ tag.alt_text }}">
 										{% endif %}
 										<span class="yellow-cta"><span aria-label="hashtag">#</span>{{ tag.name }}</span>
 									</div>

diff --git a/templates/blocks/carousel_header_full-width-classic.twig b/templates/blocks/carousel_header_full-width-classic.twig
@@ -31,7 +31,8 @@
 										sizes="{{ slide.image_sizes }}"
 										data-background-position="{{ slide.focus_image }}"
 										loading="lazy"
-										alt="{{ slide.image_alt  }}">
+										alt="{{ slide.image_alt }}"
+										title="{{ slide.image_alt }}">
 
 									<div class="carousel-caption">
 										<div class="caption-overlay"></div>

diff --git a/templates/blocks/content_covers.twig b/templates/blocks/content_covers.twig
@@ -33,7 +33,11 @@
 												data-ga-action="Image"
 												data-ga-label="n/a"
 												aria-label="{{ __( 'Cover image, link to ' ~ post.post_title , 'planet4-blocks' ) }}">
-													<img src="{{ post.thumbnail }}" alt="{{ post.alt_text }}" srcset="{{ post.srcset }}">
+													<img
+														src="{{ post.thumbnail }}"
+														alt="{{ post.alt_text }}"
+														title="{{ post.alt_text }}"
+														srcset="{{ post.srcset }}">
 											</a>
 										{% endif %}
 									</div>

diff --git a/templates/blocks/social_media_cards.twig b/templates/blocks/social_media_cards.twig
@@ -20,7 +20,8 @@
 						<div class="grid-item">
 							<img src="{{ card.image_src }}"
 								srcset="{{ card.image_srcset }}" sizes="{{ card.image_sizes }}"
-								alt="{{ card.alt_text }}">
+								alt="{{ card.alt_text }}"
+								title="{{ card.alt_text }}">
 
 							<div class="share-strip">
 								<a href="https://www.facebook.com/share.php?u={{ card.social_url|default(post_url)|url_encode }}&quote={{ card.message|url_encode }}"

diff --git a/templates/blocks/take-action-boxout.twig b/templates/blocks/take-action-boxout.twig
@@ -13,7 +13,7 @@
 				class="cover-card-overlay"
 				href="{{ boxout.link|default('#') }}" {{ boxout.new_tab and boxout.link ? 'target="_blank"' }}
 			></a>
-			<img src={{ boxout.image }} alt="{{ boxout.image_alt }}" />
+			<img src={{ boxout.image }} alt="{{ boxout.image_alt }}" title="{{ boxout.image_alt }}" />
 			<div class="cover-card-more">{{ __( 'Want to do more?', 'planet4-blocks' ) }}</div>
 			<div class="cover-card-content">
 				{% if ( boxout.campaigns ) %}