fix: remove title attr from some cards through prop in ListingImage t…

…o remove title attr where needed (#558) * fix: remove title attr from CardPersona, add prop in ListingImage to remove title attr where needed through props * fix: remove title attr from some cards through prop in ListingImage to remove title attr where needed --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Mar 4, 2024 · 8459177 · 8459177
1 parent 900e4da
commit 8459177
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 7 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -56,6 +56,7 @@
 - L'icona per aprire il menu in mobile è ora visibile anche quando l'header del sito è bianca.
 - La descrizione nelle card per i punti di contatto non mostrano più tutte le iniziali in maiuscolo.
 - Il colore dei link nel menu mobile è ora accessibile per tutti i temi.
+- Rimosso attributo title dall'immagine delle card: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, in evidenza
 - Migliorata l'accessibilità del menu in versione mobile.
 - Il layout dei campi di input "in errore" del blocco Form è stato uniformato.
 - La tendina delle select nel blocco Form non si sovrappone più ai campi sottostanti.

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -93,7 +93,7 @@ const CardWithImageTemplate = (props) => {
               <ListingText item={item} />
             ) : null;
 
-            const image = ListingImage({ item });
+            const image = ListingImage({ item, showTitleAttr: false });
 
             const showImage =
               (index < imagesToShow || always_show_image) && image != null;

diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
@@ -8,24 +8,27 @@ const ListingImage = ({
   showDefault = false,
   className = 'listing-image',
   responsive = true,
+  showTitleAttr = true,
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   ...imageProps
 }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  // photogallery needs to check for null image
-  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-  const image = Image({
+  let commonImageProps = {
     item,
     'aria-hidden': true,
     alt: '',
     role: 'presentation',
     className,
     loading,
-    title: item.title,
     responsive,
     sizes,
     ...imageProps,
-  });
+  };
+  if (showTitleAttr)
+    commonImageProps = { ...commonImageProps, title: item.title };
+  // photogallery needs to check for null image
+  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
+  const image = Image(commonImageProps);
 
   if (image === null)
     return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -56,7 +56,12 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({ item, className: '', sizes: '60px' });
+            const image = ListingImage({
+              item,
+              className: '',
+              sizes: '60px',
+              showTitleAttr: false,
+            });
 
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',

diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx
@@ -70,6 +70,7 @@ const ContentInEvidenceTemplate = (props) => {
             className: 'item-image',
             loading: 'eager',
             sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
+            showTitleAttr: false,
           });
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({

diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx
@@ -58,6 +58,7 @@ const GridGalleryTemplate = ({
             let image = ListingImage({
               item,
               className: '',
+              showTitleAttr: false,
             });
             let scale = null;
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {

diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx
@@ -89,6 +89,7 @@ const InEvidenceTemplate = (props) => {
             const image = ListingImage({
               item,
               sizes: '(max-width:320px) 200px, 300px',
+              showTitleAttr: false,
             });
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;

diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx
@@ -23,6 +23,7 @@ export const CardPersona = ({
   const image = ListingImage({
     item,
     sizes: '130px',
+    showTitleAttr: false,
   });
 
   const hasImage = image !== null && showImage;