From ffb9344cf8a39caafa93a08435cd09083de596d9 Mon Sep 17 00:00:00 2001
From: Sagar Deshmukh <sagarsdeshmukh91@gmail.com>
Date: Mon, 7 Jun 2021 07:31:51 +0530
Subject: [PATCH] PLANET-5757 Add image title attribute

Previously, the global.js adds the image title attribute with alt text. To remove jQuery from global.js, drop the gobal.js and add img title at source.
---
 assets/src/blocks/Columns/Columns.js                        | 4 ++--
 assets/src/blocks/Covers/CampaignCovers.js                  | 1 +
 assets/src/blocks/Covers/ContentCovers.js                   | 1 +
 assets/src/blocks/Gallery/GalleryCarousel.js                | 1 +
 assets/src/blocks/Gallery/GalleryGrid.js                    | 1 +
 assets/src/blocks/Gallery/GalleryThreeColumns.js            | 1 +
 .../src/blocks/Splittwocolumns/SplittwocolumnsFrontend.js   | 6 ++++--
 .../blocks/Splittwocolumns/SplittwocolumnsInPlaceEdit.js    | 6 ++++--
 templates/blocks/campaign_covers.twig                       | 2 +-
 templates/blocks/carousel_header_full-width-classic.twig    | 3 ++-
 templates/blocks/content_covers.twig                        | 6 +++++-
 templates/blocks/social_media_cards.twig                    | 3 ++-
 templates/blocks/take-action-boxout.twig                    | 2 +-
 13 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/assets/src/blocks/Columns/Columns.js b/assets/src/blocks/Columns/Columns.js
index cdafbd309..da692dde8 100644
--- 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
index 6b7ab8bf0..d9535de00 100644
--- 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
index 54765b128..f069b857e 100644
--- 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
index 92ae2bd87..e6c79274b 100644
--- 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
index 4adf7e21e..1d194ca93 100644
--- 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
index 9073eb1c0..3362a1821 100644
--- 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
index 6b887c42c..549130fff 100644
--- 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
index fb6115bd0..80817cca1 100644
--- 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
index dfa4000da..8f5aa950f 100644
--- 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
index 8006c5877..0572544f3 100644
--- 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
index 823a960cb..f2c53573e 100644
--- 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
index 976a3c97d..0822d3b1a 100644
--- 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
index 70824c267..6165f6c43 100644
--- 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 ) %}