design-comuni-plone-theme 11.26.4 → 11.27.0

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

@@ -69,17 +69,13 @@ const CardWithSlideUpTextTemplate = (props) => {
             }).component;
 
             return (
-              <UniversalLink
-                item={!isEditMode ? item : null}
-                href={isEditMode ? '#' : null}
+              <div
+                className="listing-item box bg-img"
                 style={
                   image && {
                     backgroundImage: `url(${image})`,
                   }
                 }
-                className="listing-item box bg-img"
-                key={index}
-                data-element={id_lighthouse}
               >
                 <div className="bg-gradient"></div>
                 {(category || date) && (
@@ -89,14 +85,22 @@ const CardWithSlideUpTextTemplate = (props) => {
                     {date}
                   </div>
                 )}
-                <h3
-                  className={cx('title', {
-                    ellipsis: title.length > 50,
-                  })}
-                  title={title.length > 50 ? title : undefined}
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  href={isEditMode ? '#' : null}
+                  key={index}
+                  data-element={id_lighthouse}
                 >
-                  {title.substring(0, 50)}
-                </h3>
+                  <h3
+                    className={cx('title', {
+                      ellipsis: title.length > 50,
+                    })}
+                    title={title.length > 50 ? title : undefined}
+                  >
+                    {title.substring(0, 50)}
+                  </h3>
+                </UniversalLink>
+
                 <div className="box-slide-up">
                   {show_description && item.description && (
                     <p>{item.description}</p>
@@ -111,7 +115,12 @@ const CardWithSlideUpTextTemplate = (props) => {
                     className="justify-content-end"
                   />
                 </div>
-              </UniversalLink>
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  className="card-link"
+                  aria-hidden="true"
+                ></UniversalLink>
+              </div>
             );
           })}
         </div>

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

@@ -1,24 +1,62 @@
 import { UniversalLink } from '@plone/volto/components';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
+const ListingImageWrapper = ({ children, item, noWrapLink }) => {
+  return noWrapLink ? (
+    children
+  ) : (
+    <UniversalLink item={item} className="img-wrapper">
+      {children}
+    </UniversalLink>
+  );
+};
+
 const ListingImage = ({
   item = {},
   loading = 'lazy',
   showDefault = false,
   className = 'listing-image',
   responsive = true,
-  showTitleAttr = true,
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   noWrapLink = false,
   ...imageProps
 }) => {
+  if (!contentHasImage(item) && !imageProps?.image_field) {
+    if (showDefault) {
+      return (
+        <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+          <img
+            src={DefaultImageSVG}
+            alt=""
+            sizes={sizes}
+            aria-hidden={true}
+            role="presentation"
+            className="listing-image responsive"
+            style={{
+              minHeight: 'unset',
+              height: '100%',
+            }}
+          />
+        </ListingImageWrapper>
+      );
+    } else return null;
+  }
   const Image = config.getComponent({ name: 'Image' }).component;
+
+  //Verifies if the item has a preview image or an header image
+  const showTitleAttr = !!(item.hasPreviewImage && item.preview_caption);
+
+  //Verifies with caption to show as alt and title text
+  const imageCaption =
+    item.hasPreviewImage && item.preview_caption ? item.preview_caption : null;
+
   let commonImageProps = {
     item,
     'aria-hidden': imageProps.alt || item.title ? false : true,
-    alt: imageProps.alt ?? item.title ?? '',
+    alt: imageProps.alt ?? imageCaption ?? '',
     role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
@@ -26,22 +64,19 @@ const ListingImage = ({
     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);
-  const defaultImage = <img src={DefaultImageSVG} alt="" />;
-
-  if (image === null && !showDefault) return null;
+  // show title attribute if preview_caption or image_caption is present for the alt text
+  if (showTitleAttr) {
+    commonImageProps = {
+      ...commonImageProps,
+      title: imageCaption,
+    };
+  }
 
-  return !noWrapLink ? (
-    <UniversalLink item={item} className="img-wrapper">
-      {image ?? defaultImage}
-    </UniversalLink>
-  ) : (
-    image ?? defaultImage
+  return (
+    <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+      <Image {...commonImageProps} />
+    </ListingImageWrapper>
   );
 };
 

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

@@ -19,7 +19,10 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getComponentWithFallback } from 'design-comuni-plone-theme/helpers';
+import {
+  getComponentWithFallback,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
@@ -56,14 +59,7 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              className: '',
-              sizes: '60px',
-              showTitleAttr: false,
-              alt: item.title,
-            });
-
+            const hasImage = contentHasImage(item);
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',
               dependencies: ['CompleteBlockLinksTemplate', item['@type']],
@@ -84,7 +80,16 @@ const CompleteBlockLinksTemplate = (props) => {
                     className={'no-external-if-link'}
                   >
                     <div className="d-flex">
-                      {image && <div className="image-container">{image}</div>}
+                      {hasImage && (
+                        <div className="image-container">
+                          <ListingImage
+                            item={item}
+                            className=""
+                            sizes="60px"
+                            alt={item.title}
+                          />
+                        </div>
+                      )}
                       <div>
                         <CardBody>
                           <CardTitle tag="h3" className="text-secondary">

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

@@ -23,6 +23,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   ListingCategory,
@@ -66,13 +67,7 @@ const ContentInEvidenceTemplate = (props) => {
           const date = getCalendarDate(item, rrule.rrulestr);
           const eventRecurrenceMore = getEventRecurrenceMore(item, isEditMode);
           const listingText = <ListingText item={item} />;
-          const image = ListingImage({
-            item,
-            className: 'item-image',
-            loading: 'eager',
-            sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
-            showTitleAttr: false,
-          });
+          const hasImage = contentHasImage(item);
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({
             name: 'BlockExtraTags',
@@ -84,8 +79,15 @@ const ContentInEvidenceTemplate = (props) => {
 
           return (
             <Row key={item['@id']} className="content-in-evidence">
-              {image && (
-                <Col lg={{ size: 6, offset: 1, order: 2 }}>{image}</Col>
+              {hasImage && (
+                <Col lg={{ size: 6, offset: 1, order: 2 }}>
+                  <ListingImage
+                    item={item}
+                    className="item-image"
+                    loading="eager"
+                    sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
+                  />
+                </Col>
               )}
               <Col lg={{ size: 5, order: 1 }}>
                 <Card>

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

@@ -7,7 +7,7 @@ import {
   ListingLinkMore,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
-
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
@@ -58,9 +58,9 @@ const GridGalleryTemplate = ({
             let image = ListingImage({
               item,
               className: '',
-              showTitleAttr: false,
             });
             let scale = null;
+            let hasImage = contentHasImage(item);
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
               scale = 'great';
             }
@@ -83,6 +83,7 @@ const GridGalleryTemplate = ({
                   loading={critical ? 'eager' : 'lazy'}
                 />
               );
+              hasImage = true;
             }
 
             return (
@@ -94,7 +95,7 @@ const GridGalleryTemplate = ({
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}
                 >
-                  {image && (
+                  {hasImage && (
                     <picture className="volto-image responsive">
                       {image}
                     </picture>

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

@@ -23,6 +23,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   CardCalendar,
@@ -87,11 +88,7 @@ const InEvidenceTemplate = (props) => {
             const listingText = show_description ? (
               <ListingText item={item} />
             ) : null;
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:320px) 200px, 300px',
-              showTitleAttr: false,
-            });
+            const hasImage = contentHasImage(item);
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -103,7 +100,7 @@ const InEvidenceTemplate = (props) => {
               <CardPersona
                 item={item}
                 className="listing-item card-bg"
-                showImage={image ? true : false}
+                showImage={hasImage}
                 show_description={show_description}
                 icon={icon}
                 isEditMode={isEditMode}
@@ -111,10 +108,13 @@ const InEvidenceTemplate = (props) => {
               />
             ) : (
               <Card key={index} className={cx('listing-item card-bg')}>
-                {index === 0 && image && (
+                {index === 0 && hasImage && (
                   <div className="img-responsive-wrapper">
                     <div className="img-responsive">
-                      {image}
+                      <ListingImage
+                        item={item}
+                        sizes="(max-width:320px) 200px, 300px"
+                      />
                       {item['@type'] === 'Event' && (
                         <CardCalendar start={item.start} end={item.end} />
                       )}

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

@@ -127,10 +127,10 @@ const PhotogalleryTemplate = ({
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
 
-  const figure = (image, item) => {
+  const figure = (imageProps, item) => {
     return (
       <figure className="img-wrapper volto-image responsive">
-        {image}
+        <ListingImage {...imageProps} />
         {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
       </figure>
     );
@@ -152,7 +152,7 @@ const PhotogalleryTemplate = ({
           <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
-                const image = ListingImage({
+                const imageProps = {
                   item,
                   sizes: `(max-width:600px) 450px, (max-width:1024px) ${
                     items.length < 2 ? '1000' : '500'
@@ -164,7 +164,8 @@ const PhotogalleryTemplate = ({
                       : '450'
                   }px`,
                   noWrapLink: true,
-                });
+                  showDefault: true,
+                };
                 return (
                   <SingleSlideWrapper
                     className={cx('', {
@@ -179,7 +180,7 @@ const PhotogalleryTemplate = ({
                         openLinkInNewTab={true}
                         title={intl.formatMessage(messages.viewImage)}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </UniversalLink>
                     ) : (
                       <a
@@ -204,7 +205,7 @@ const PhotogalleryTemplate = ({
                           messages.viewPreview,
                         )} ${item.title}`}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </a>
                     )}
                   </SingleSlideWrapper>

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

@@ -218,12 +218,15 @@ const SliderTemplate = ({
 
             <Slider {...settings} ref={slider}>
               {items.map((item, index) => {
-                const image = ListingImage({
-                  item,
-                  loading: index === 0 ? 'eager' : 'lazy',
-                  sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
-                  critical: true,
-                });
+                const image = (
+                  <ListingImage
+                    item={item}
+                    loading={index === 0 ? 'eager' : 'lazy'}
+                    sizes={`max-width(991px) 620px, ${1300 / nSlidesToShow}px`}
+                    critical
+                    showDefault
+                  />
+                );
                 const nextIndex = index < items.length - 1 ? index + 1 : null;
                 const prevIndex = index > 0 ? index - 1 : null;
                 return (

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Container, Row, Col } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-
 import {
   ListingLinkMore,
   ListingImage,
@@ -38,34 +37,31 @@ const SmallBlockLinksTemplate = ({
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:575px) 520px, 200px',
-              style: {},
-              alt: item.title,
-              noWrapLink: true,
-            });
-
             return (
               <Col
                 md="3"
                 key={item['@id']}
                 className="col-item col-sm-4 col-lg-2"
               >
-                {image && (
-                  <div className="center-image-card">
-                    <UniversalLink
-                      item={!isEditMode ? item : null}
-                      href={isEditMode ? '#' : ''}
-                      className="img-link"
-                      overrideMarkSpecialLinks={
-                        override_links_accessibility_marker
-                      }
-                    >
-                      {image}
-                    </UniversalLink>
-                  </div>
-                )}
+                <div className="center-image-card">
+                  <UniversalLink
+                    item={!isEditMode ? item : null}
+                    href={isEditMode ? '#' : ''}
+                    className="img-link"
+                    overrideMarkSpecialLinks={
+                      override_links_accessibility_marker
+                    }
+                  >
+                    <ListingImage
+                      item={item}
+                      sizes="(max-width:575px) 520px, 200px"
+                      style={{}}
+                      alt={item.title}
+                      noWrapLink
+                      showDefault
+                    />
+                  </UniversalLink>
+                </div>
               </Col>
             );
           })}

package/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx

@@ -68,7 +68,4 @@ test('View renders all fields', async () => {
 
   expect(screen.getByText(/Accordion 1/i)).toBeInTheDocument();
   expect(screen.getByText(/Is this just fantasy/i)).toBeInTheDocument();
-  expect(
-    screen.getByRole('link', { name: /Caught in a landside/i }),
-  ).toBeInTheDocument();
 });

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -8,6 +8,7 @@ import {
   ListingCategory,
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 export const CardPersona = ({
   item,
@@ -20,13 +21,7 @@ export const CardPersona = ({
   type,
   isEditMode,
 }) => {
-  const image = ListingImage({
-    item,
-    sizes: '130px',
-    showTitleAttr: false,
-  });
-
-  const hasImage = image !== null && showImage;
+  const hasImage = contentHasImage(item) && showImage;
 
   return (
     <Card
@@ -58,7 +53,9 @@ export const CardPersona = ({
           )}
         </CardBody>
         {hasImage && (
-          <div className="card-image card-image-rounded">{image}</div>
+          <div className="card-image card-image-rounded">
+            <ListingImage item={item} sizes="130px" />
+          </div>
         )}
       </div>
     </Card>

package/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx

@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'feedback_form_title',
     defaultMessage: 'How clear is the information on this page?',
   },
+  aria_title_feedback: {
+    id: 'feedback_form_aria_title',
+    defaultMessage: 'Feedback form',
+  },
   yes: {
     id: 'feedback_form_yes',
     defaultMessage: 'Yes',
@@ -255,7 +259,11 @@ const FeedbackForm = ({ title, pathname }) => {
       <Container>
         <Row className="d-flex justify-content-center bg-primary">
           <Col className="col-12 col-lg-6">
-            <div className="feedback-form" role="form">
+            <div
+              className="feedback-form"
+              role="form"
+              aria-label={intl.formatMessage(messages.aria_title_feedback)}
+            >
               <Card
                 className="shadow card-wrapper py-4 px-4"
                 data-element="feedback"

package/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx

@@ -13,6 +13,10 @@ const messages = defineMessages({
     id: 'Cerca',
     defaultMessage: 'Cerca',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const HeaderSearch = () => {
@@ -21,7 +25,11 @@ const HeaderSearch = () => {
 
   return (
     <>
-      <div className="it-search-wrapper">
+      <div
+        className="it-search-wrapper"
+        role="search"
+        aria-label={intl.formatMessage(messages.searchLabel)}
+      >
         <span className="d-none d-md-block">
           {intl.formatMessage(messages.search)}
         </span>

package/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx

@@ -166,6 +166,10 @@ const messages = defineMessages({
     id: 'currentActive',
     defaultMessage: 'attivo',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const SearchModal = ({ closeModal, show }) => {
@@ -334,6 +338,7 @@ const SearchModal = ({ closeModal, show }) => {
       id="search-modal"
       isOpen={show}
       toggle={closeModal}
+      role="alertdialog"
     >
       <ModalHeader toggle={closeModal}>
         <Container>
@@ -392,7 +397,11 @@ const SearchModal = ({ closeModal, show }) => {
             <>
               <div className="search-filters search-filters-text">
                 <div className="form-group">
-                  <div className="input-group mb-3">
+                  <div
+                    className="input-group mb-3"
+                    role="search"
+                    aria-label={intl.formatMessage(messages.searchLabel)}
+                  >
                     <input
                       id="search-text"
                       type="text"

package/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx

@@ -12,13 +12,20 @@ import {
   HeaderContent,
   HeaderRightZone,
 } from 'design-react-kit';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import {
   getSiteProperty,
   useHomePath,
 } from 'design-comuni-plone-theme/helpers';
 import { SiteProperty } from 'volto-site-settings';
 
+const messages = defineMessages({
+  utilityMenu: {
+    id: 'utilityMenu',
+    defaultMessage: 'Utility Menu',
+  },
+});
+
 const HeaderSlim = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const intl = useIntl();
@@ -45,7 +52,13 @@ const HeaderSlim = () => {
 
   const target = subsite ? null : '_blank';
   return (
-    <Header small={false} theme="" type="slim" role="navigation">
+    <Header
+      small={false}
+      theme=""
+      type="slim"
+      role="navigation"
+      aria-label={intl.formatMessage(messages.utilityMenu)}
+    >
       <HeaderContent>
         <HeaderBrand
           responsive

package/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -7,10 +7,10 @@ import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useIntl } from 'react-intl';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { getSlimHeader, getItemsByPath } from 'volto-slimheader';