design-comuni-plone-theme 12.3.0 → 12.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [12.3.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v12.3.0...v12.3.1) (2025-08-08)
+
+
+### Bug Fixes
+
+* **a11y:** fixed titles and images attributes ([#973](https://github.com/RedTurtle/design-comuni-plone-theme/issues/973)) ([bd4cdd6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/bd4cdd6bc4b417d1f0f1f6848e08ba346e0e4240))
+* added state to close the date picker modal after endDate loses focus (Tab exit) ([#981](https://github.com/RedTurtle/design-comuni-plone-theme/issues/981)) ([9329f0e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/9329f0e0ecf8b2588e2b44aecd81f541b3333df4))
+* contentHasImage function + showImage conditions ([#985](https://github.com/RedTurtle/design-comuni-plone-theme/issues/985)) ([855779b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/855779bfdae49d87c87842a5632ef067d471c6f2))
+* image in template "Blocco link completo"  ([#971](https://github.com/RedTurtle/design-comuni-plone-theme/issues/971)) ([3622357](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3622357abdb17821cad69a17b7110b28db34ce2d))
+* improved link visibility on images within listing blocks ([#978](https://github.com/RedTurtle/design-comuni-plone-theme/issues/978)) ([2beaedc](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2beaedce9c176f81cc399fb938835192b1aa90c9))
+* slate link deserializer convert <a> without href attribute into simple text ([#982](https://github.com/RedTurtle/design-comuni-plone-theme/issues/982)) ([f7acb30](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f7acb30b3513ff5e4c3dbbb16ba924eb2ef486c4))
+
+
+### Documentation
+
+* updated publiccode and release log ([598e3e2](https://github.com/RedTurtle/design-comuni-plone-theme/commit/598e3e281838d3bd5124009ffbde811783281dc0))
+
 ## [12.3.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v12.2.3...v12.3.0) (2025-07-31)
 
 

package/RELEASE.md

@@ -41,6 +41,17 @@
 - ...
  -->
 
+## Versione 12.3.1 (08/08/2025)
+
+### Fix
+
+- Migliorata l'accessibilità rimuovendo la visibilità delle immagini di presentazione nei blocchi elenco.
+- Sistemata la semantica dei titoli nei blocchi elenco migliorando così l'accessibilità della pagina.
+- Sistemata la visualizzazione delle immagini all’interno della card del blocco Link completo quando sono in landscape.
+- Ripristinata la funzionalità per mostrare tutte le immagini del blocco elenco o solo quelle della prima fila, se presenti.
+- Ora il calendario si chiude automaticamente quando si passa al campo successivo dopo aver selezionato la data di fine, nei blocchi di ricerca dove è possibile indicare una data di inizio e fine.
+- Migliorata la visualizzazione dei link sulle immagini nei blocchi elenco, rimosso testo non necessario con tipo e dimensione dei file
+
 ## Versione 12.3.0 (31/07/2025)
 
 ### Novità

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "12.3.0",
+  "version": "12.3.1",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2025-07-31'
+releaseDate: '2025-08-08'
 softwareType: standalone/web
-softwareVersion: 12.3.0
+softwareVersion: 12.3.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/Common/SearchFilters/DateFilter.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
@@ -226,6 +226,31 @@ const DateFilter = (props) => {
     }
   }, []);
 
+  const endDateInputRef = useRef(null);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const endDateInput = document.querySelector(
+        `#end-date-filter-${blockID}`,
+      );
+      if (endDateInput && !endDateInputRef.current) {
+        endDateInputRef.current = endDateInput;
+        endDateInput.addEventListener('blur', handleEndDateBlur);
+      }
+    }, 100);
+
+    return () => {
+      clearInterval(interval);
+      if (endDateInputRef.current) {
+        endDateInputRef.current.removeEventListener('blur', handleEndDateBlur);
+      }
+    };
+  }, []);
+
+  const handleEndDateBlur = () => {
+    setFocusedDateInput(null);
+  };
+
   return (
     <div className="me-lg-3 my-2 my-lg-1 filter-wrapper date-filter">
       <DateRangePicker
@@ -264,7 +289,7 @@ const DateFilter = (props) => {
         customCloseIcon={
           <Icon
             icon="it-close"
-            color="white"
+            color="black"
             title={intl.formatMessage(messages.clearDates)}
           />
         }

package/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx

@@ -92,7 +92,7 @@ const BandiInEvidenceTemplate = ({
               <Col lg={4} sm={6} xs={12} key={index} className="pb-3">
                 <Card key={index} className="listing-item card-bg mt-2">
                   <CardBody>
-                    <CardTitle tag="h3" className="title">
+                    <CardTitle tag={title ? 'h3' : 'h2'} className="title">
                       <UniversalLink
                         className="bando-title"
                         item={!isEditMode ? item : null}

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx

@@ -51,6 +51,7 @@ const CardWithImageDefault = (props) => {
     natural_image_size = false,
     id_lighthouse,
     rrule,
+    title, // title of entire block
   } = props;
 
   const imagesToShow = set_four_columns ? 4 : 3;
@@ -62,10 +63,9 @@ const CardWithImageDefault = (props) => {
     : getEventRecurrenceMore(item, isEditMode);
   const listingText = show_description ? <ListingText item={item} /> : null;
 
-  const showImage = contentHasImage(
-    item,
-    index < imagesToShow || always_show_image,
-  );
+  const showImage =
+    contentHasImage(item) && (index < imagesToShow || always_show_image);
+
   const category = getCategory(item, show_type, show_section, props);
   const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -124,10 +124,11 @@ const CardWithImageDefault = (props) => {
               </CardCategory>
             )}
             <CardTitle
-              tag="h3"
-              className={`${
-                isEventAppointment ? 'rassegna-appointment-title' : ''
-              }`}
+              tag={title ? 'h3' : 'h2'}
+              className={cx('', {
+                'rassegna-appointment-title': isEventAppointment,
+                h3: !title,
+              })}
             >
               <UniversalLink
                 item={!isEditMode ? item : null}

package/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx

@@ -45,6 +45,8 @@ const CardWithSlideUpTextTemplate = (props) => {
     rrule,
   } = props;
 
+  const TitleTag = title ? 'h3' : 'h2';
+
   return (
     <div className="card-slide-text-template">
       <Container className="px-4 mt-3">
@@ -62,7 +64,7 @@ const CardWithSlideUpTextTemplate = (props) => {
             const date = hide_dates
               ? null
               : getCalendarDate(item, rrule.rrulestr);
-            const title = item?.title || '';
+            const itemTitle = item?.title || '';
 
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',
@@ -95,14 +97,15 @@ const CardWithSlideUpTextTemplate = (props) => {
                     'auto-margin-link': !category && !date,
                   })}
                 >
-                  <h3
+                  <TitleTag
                     className={cx('title', {
-                      ellipsis: title.length > 50,
+                      h3: !title,
+                      ellipsis: itemTitle.length > 50,
                     })}
-                    title={title.length > 50 ? title : undefined}
+                    title={itemTitle.length > 50 ? itemTitle : undefined}
                   >
-                    {title.substring(0, 50)}
-                  </h3>
+                    {itemTitle.substring(0, 50)}
+                  </TitleTag>
                 </UniversalLink>
                 <div className="box-slide-up">
                   {show_description && item.description && (

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -32,7 +32,6 @@ const ListingImage = ({
             src={DefaultImageSVG}
             alt=""
             sizes={sizes}
-            aria-hidden={true}
             role="presentation"
             className="listing-image responsive"
             style={{
@@ -55,9 +54,9 @@ const ListingImage = ({
 
   let commonImageProps = {
     item,
-    'aria-hidden': imageProps.alt || item.title ? false : true,
+    'aria-hidden': imageProps.alt || imageCaption ? '' : true,
     alt: imageProps.alt ?? imageCaption ?? '',
-    role: imageProps.alt || item.title ? '' : 'presentation',
+    role: imageProps.alt || imageCaption ? '' : 'presentation',
     className,
     loading,
     responsive,

package/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx

@@ -92,7 +92,12 @@ const CompleteBlockLinksTemplate = (props) => {
                       )}
                       <div>
                         <CardBody>
-                          <CardTitle tag="h3" className="text-secondary">
+                          <CardTitle
+                            tag={title ? 'h3' : 'h2'}
+                            className={cx('text-secondary', {
+                              h3: !title,
+                            })}
+                          >
                             {item.title}
                             {item['@type'] === 'Link' &&
                               !isInternalURL(

package/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx

@@ -130,10 +130,11 @@ const InEvidenceTemplate = (props) => {
                     </CardCategory>
                   )}
                   <CardTitle
-                    tag="h3"
-                    className={`${
-                      isEventAppointment ? 'rassegna-appointment-title' : ''
-                    }`}
+                    tag={title ? 'h3' : 'h2'}
+                    className={cx('', {
+                      'rassegna-appointment-title': isEventAppointment,
+                      h3: !title,
+                    })}
                   >
                     <UniversalLink
                       item={!isEditMode ? item : null}

package/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx

@@ -140,10 +140,11 @@ const RibbonCardTemplate = (props) => {
                   >
                     {date && <div className="dates">{date}</div>}
                     <CardTitle
-                      tag="h3"
-                      className={`${
-                        isEventAppointment ? 'rassegna-appointment-title' : ''
-                      }`}
+                      tag={title ? 'h3' : 'h2'}
+                      className={cx('', {
+                        'rassegna-appointment-title': isEventAppointment,
+                        h3: !title,
+                      })}
                     >
                       <UniversalLink
                         item={!isEditMode ? item : null}

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx

@@ -58,6 +58,7 @@ const SimpleCardDefault = (props) => {
     id_lighthouse,
     rrule,
     index,
+    title,
   } = props;
 
   const getItemClass = (item) => {
@@ -123,10 +124,11 @@ const SimpleCardDefault = (props) => {
           </CardCategory>
         )}
         <CardTitle
-          tag="h3"
-          className={`${
-            isEventAppointment ? 'rassegna-appointment-title' : ''
-          }`}
+          tag={title ? 'h3' : 'h2'}
+          className={cx('', {
+            'rassegna-appointment-title': isEventAppointment,
+            h3: !title,
+          })}
         >
           <UniversalLink
             item={!isEditMode ? item : null}

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateCompact.jsx

@@ -67,7 +67,12 @@ const SimpleCardTemplateCompact = ({
               </div>
             )}
             <CardBody>
-              <CardTitle tag="h3">
+              <CardTitle
+                tag={title ? 'h3' : 'h2'}
+                className={cx('', {
+                  h3: !title,
+                })}
+              >
                 <UniversalLink
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow.jsx

@@ -218,7 +218,12 @@ const SimpleCardTemplateDefaultOneForRow = (props) => {
                     )}
                   </CardCategory>
                 )}
-                <CardTitle tag="h3">
+                <CardTitle
+                  tag={title ? 'h3' : 'h2'}
+                  className={cx('', {
+                    h3: !title,
+                  })}
+                >
                   <UniversalLink
                     item={!isEditMode ? item : null}
                     href={isEditMode ? '#' : null}

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -55,7 +55,7 @@ const Edit = (props) => {
         >
           <CardBody>
             <div className="simple-text-card cms-ui">
-              <CardTitle tag="h3" className="h4">
+              <CardTitle tag="h2" className="h4">
                 <TextEditorWidget
                   {...otherProps}
                   showToolbar={false}

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx

@@ -27,7 +27,7 @@ const TextCardView = ({ data, id, block }) => {
           tag="div"
         >
           <CardBody>
-            <CardTitle tag="h3" className="h4" id={id + '-title'}>
+            <CardTitle tag="h2" className="h4" id={id + '-title'}>
               {data.simple_card_title}
             </CardTitle>
             <hr />

package/src/config/Slate/Link/deserializer.js

@@ -4,12 +4,16 @@ import { SIMPLELINK } from '@plone/volto-slate/constants';
 
 export const simpleLinkDeserializer = (editor, el) => {
   let parent = el;
-
   let children = Array.from(parent.childNodes)
     .map((el) => deserialize(editor, el))
     .flat();
 
   if (!children.length) children = [{ text: '' }];
+
+  if (el.getAttribute('href') === null) {
+    return jsx('text', {}, children);
+  }
+
   const attrs = {
     type: SIMPLELINK,
     data: {

package/src/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss

@@ -17,14 +17,6 @@
     margin: 18px 0px 0px 18px;
 
     background-color: $white;
-
-    .volto-image {
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
   }
 
   .card.card-bg {
@@ -52,4 +44,9 @@
   .no-external-if-link > .external-link {
     display: none;
   }
+
+  img.responsive {
+    height: 100%;
+    object-fit: cover;
+  }
 }

package/src/theme/ItaliaTheme/Blocks/_listing.scss

@@ -30,4 +30,22 @@
     padding-bottom: 15px;
     border-bottom: 1px solid #455b71;
   }
+
+  //* customizzazione: nascondere enhance-link quando è un'immagine
+  .card-with-image-template,
+  .in-evidence,
+  .contentInEvidenceTemplate,
+  .list-template {
+    .img-responsive-wrapper {
+      .enhance-link {
+        display: none;
+      }
+    }
+  }
+  .small-block-links,
+  .contentInEvidenceTemplate {
+    .enhance-link {
+      display: none;
+    }
+  }
 }

package/src/theme/ItaliaTheme/Components/_card.scss

@@ -188,9 +188,9 @@
     }
 
     .rassegna-info {
-      font-size: 0.9rem;
       display: inline-flex;
       column-gap: 0.3rem;
+      font-size: 0.9rem;
 
       a {
         text-decoration: none;