design-comuni-plone-theme 8.3.2 → 8.4.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-07-20T15:16:26.205Z\n"
+"POT-Creation-Date: 2023-08-24T08:14:25.576Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -291,11 +291,6 @@ msgstr ""
 msgid "Icons placeholder"
 msgstr ""
 
-#: components/ItaliaTheme/Unauthorized/Unauthorized
-# defaultMessage: If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}.
-msgid "If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/Alert/Sidebar
 # defaultMessage: Immagine
 msgid "Image"
@@ -570,11 +565,6 @@ msgstr ""
 msgid "Show all content types"
 msgstr ""
 
-#: components/ItaliaTheme/Unauthorized/Unauthorized
-# defaultMessage: Site Administration
-msgid "Site Administration"
-msgstr ""
-
 #: components/ItaliaTheme/Search/Search
 # defaultMessage: Sono occorsi degli errori
 msgid "Sono occorsi degli errori"
@@ -689,7 +679,6 @@ msgid "Vedi"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
 # defaultMessage: Vedi l'immagine
 msgid "Vedi l'immagine"
 msgstr ""
@@ -1708,6 +1697,11 @@ msgstr ""
 msgid "done_edit_social_links"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Navigazione elementi slider
+msgid "dots"
+msgstr ""
+
 #: components/ItaliaTheme/View/VenueView/VenueWhere
 # defaultMessage: Indirizzo
 msgid "dove"
@@ -2185,6 +2179,7 @@ msgid "imageBackground"
 msgstr ""
 
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
+#: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Importi di viaggio e/o servizi
 msgid "importi_di_viaggio_e_o_servizi"
 msgstr ""
@@ -2603,11 +2598,6 @@ msgstr ""
 msgid "organizzato_da"
 msgstr ""
 
-#: components/ItaliaTheme/View/PersonaView/PersonaRuolo
-# defaultMessage: Organizzazione
-msgid "organizzazione_riferimento"
-msgstr ""
-
 #: components/ItaliaTheme/View/Commons/TrasparenzaFields
 #: components/ItaliaTheme/View/TrasparenzaView/DettagliProcedimentiView
 # defaultMessage: Organo competente adozione provvedimento finale
@@ -2666,6 +2656,11 @@ msgstr ""
 msgid "persona"
 msgstr ""
 
+#: components/ItaliaTheme/View/PersonaView/PersonaRuolo
+# defaultMessage: Fa parte di
+msgid "persona_strutture_correlate"
+msgstr ""
+
 #: components/ItaliaTheme/View/PuntoDiContattoView/RelatedItemsChipsPDC
 # defaultMessage: Persone correlate
 msgid "persone_correlate"
@@ -2691,6 +2686,11 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Precedente
+msgid "precedente"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/IconPreviewWidget
 # defaultMessage: Anteprima dell'icona scelta
 msgid "previewIconSelected"
@@ -3525,6 +3525,11 @@ msgstr ""
 msgid "skype"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Vai alla slide {index}
+msgid "slideDot"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3665,6 +3670,11 @@ msgstr ""
 msgid "subjects"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Successivo
+msgid "successivo"
+msgstr ""
+
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Con il supporto di
 msgid "supported_by"
@@ -3874,6 +3884,11 @@ msgstr ""
 msgid "venues"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "viewImage"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
 # defaultMessage: Vedi tutti
 msgid "view_all"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.3.2",
+  "version": "8.4.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

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

package/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js

@@ -1,3 +1,5 @@
+import { useRef, useEffect } from 'react';
+
 export const getCategory = (item, show_type, show_section, props) => {
   let cat = [];
 
@@ -15,3 +17,64 @@ export const getCategory = (item, show_type, show_section, props) => {
   }
   return null;
 };
+export const visibleSlideTitle = (selector) => {
+  // Needed to deal with react-slick duplicating a lot of slides
+  // when used in infinite mode. It's an useless and counterproductive
+  // thing to do on their part, there are multiple issues opened.
+  // The lib is not actually mantained so...
+  return Array.from(document.querySelectorAll(selector)).find((e) => {
+    const rect = e.getBoundingClientRect();
+    return rect.left >= 0 && rect.right <= window.innerWidth;
+  });
+};
+
+export const useSlider = (userAutoplay) => {
+  const slider = useRef(null);
+  const onIntersection = (entries, opt) => {
+    entries.forEach((entry) =>
+      entry.target.classList.toggle('visible', entry.isIntersecting),
+    );
+  };
+  const observer = new IntersectionObserver(onIntersection, {
+    root: null,
+    threshold: 0.5,
+  });
+  if (document.querySelector('.block.listing.slider'))
+    observer.observe(document.querySelector('.block.listing.slider'));
+  useEffect(() => {
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const focusNext = (currentSlide) => {
+    const sliderElement = document.querySelector('.block.listing.slider');
+    if (!sliderElement) return;
+    const sliderIsVisible = sliderElement.classList.contains('visible');
+
+    if (!sliderIsVisible) {
+      slider.current.slickPause();
+      return;
+    }
+    const slide = sliderElement.querySelectorAll(
+      `a.slide-link[data-slide="${currentSlide}"]`,
+    );
+
+    if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
+
+    // Custom handling of focus as per Arter a11y audit and request
+    const link = visibleSlideTitle(
+      `a.slide-link[data-slide="${currentSlide}"]`,
+    );
+
+    if (!link || document.activeElement === link) {
+      return;
+    }
+    // eslint-disable-next-line no-unused-expressions
+    else link.focus();
+  };
+
+  return {
+    slider,
+    focusNext,
+  };
+};

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

@@ -1,20 +1,17 @@
 import 'slick-carousel/slick/slick.css';
 import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
-
 import { Col, Container, Row } from 'design-react-kit';
 import {
   Icon,
   ListingImage,
   ListingLinkMore,
-  NextArrow,
-  PrevArrow,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-import React, { useRef, useState } from 'react';
+import {
+  useSlider,
+  visibleSlideTitle,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -22,25 +19,185 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
   viewImage: {
-    id: "Vedi l'immagine",
-    defaultMessage: "Vedi l'immagine",
+    id: 'viewImage',
+    defaultMessage:
+      'Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra',
   },
   play: {
     id: 'Play slider',
-    defaultMessage: 'Play',
+    defaultMessage: 'Seleziona per riprodurre',
   },
   pause: {
     id: 'Pause slider',
-    defaultMessage: 'Metti in pausa',
+    defaultMessage: 'Seleziona per mettere in pausa',
+  },
+  precedente: {
+    id: 'precedente',
+    defaultMessage: 'Precedente',
+  },
+  successivo: {
+    id: 'successivo',
+    defaultMessage: 'Successivo',
+  },
+  dots: {
+    id: 'dots',
+    defaultMessage: 'Navigazione elementi slider',
+  },
+  slideDot: {
+    id: 'slideDot',
+    defaultMessage: 'Vai alla slide {index}',
   },
 });
 
+function NextArrow(props) {
+  // Custom handling of focus as per Arter a11y audit and request
+  const { className, style, onClick, intl, currentSlide } = props;
+  const handleClick = (options) => {
+    onClick(options, false);
+  };
+  const handleKeyboardUsers = (e) => {
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      const link = visibleSlideTitle(
+        `a.slide-link[data-slide="${currentSlide}"]`,
+      );
+      link && link.focus();
+    }
+  };
+
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={handleClick}
+      title={intl.formatMessage(messages.successivo)}
+      aria-label={intl.formatMessage(messages.successivo)}
+      aria-hidden={true}
+      onKeyDown={handleKeyboardUsers}
+      id="sliderNextArrow"
+    >
+      <Icon icon="chevron-right" key="chevron-right" />
+      <span class="sr-only">{intl.formatMessage(messages.successivo)}</span>
+    </button>
+  );
+}
+
+function PrevArrow(props) {
+  // Custom handling of focus as per Arter a11y audit and request
+  const {
+    className,
+    style,
+    onClick,
+    intl,
+    focusNext,
+    currentSlide,
+    slideCount,
+  } = props;
+  const handleClick = (options) => {
+    onClick(options, false);
+  };
+  const handleKeyboardUsers = (e) => {
+    if (e.key === 'Tab' && !e.shiftKey) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (currentSlide < slideCount) {
+        const link = visibleSlideTitle(
+          `a.slide-link[data-slide="${currentSlide}"]`,
+        );
+        link && link.focus();
+      } else focusNext(0);
+    }
+  };
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={handleClick}
+      title={intl.formatMessage(messages.precedente)}
+      aria-label={intl.formatMessage(messages.precedente)}
+      aria-hidden={true}
+      id="sliderPrevArrow"
+      onKeyDown={handleKeyboardUsers}
+    >
+      <Icon icon="chevron-left" key="chevron-left-prev" />
+      <span class="sr-only">{intl.formatMessage(messages.precedente)}</span>
+    </button>
+  );
+}
+
+const Slide = ({
+  item,
+  index,
+  image,
+  show_image_title,
+  full_width,
+  intl,
+  setUserAutoplay,
+  userAutoplay,
+  slider,
+}) => {
+  const handleKeyboardUsers = (e) => {
+    const { key, shiftKey } = e;
+    if (key === 'Tab') {
+      e.stopPropagation();
+      e.preventDefault();
+      // Keeping auto pause off for now
+      // if (userAutoplay) setUserAutoplay(false);
+      // slider.current.slickPause();
+      let elementToFocus;
+      if (shiftKey) {
+        elementToFocus = document.getElementById('sliderPrevArrow');
+      } else elementToFocus = document.getElementById('sliderNextArrow');
+      elementToFocus.focus();
+    }
+  };
+
+  return (
+    <div
+      className="it-single-slide-wrapper"
+      key={item['@id'] + index}
+      data-slide={index}
+    >
+      <div className="slide-wrapper">
+        {image ? (
+          <figure className="img-wrapper">{image}</figure>
+        ) : (
+          <div className="img-placeholder"></div>
+        )}
+        {show_image_title && (
+          <div className="slide-title">
+            <UniversalLink
+              item={item}
+              title={intl.formatMessage(messages.viewImage)}
+              tabIndex={0}
+              data-slide={index}
+              className={'slide-link no-external-if-link'}
+              onKeyDown={handleKeyboardUsers}
+            >
+              {full_width ? (
+                <Container>
+                  {item.title} <Icon icon="arrow-right" key="arrow-right-fw" />
+                </Container>
+              ) : (
+                <>
+                  {item.title} <Icon icon="arrow-right" key="arrow-right" />
+                </>
+              )}
+            </UniversalLink>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
 const SliderTemplate = ({
   items,
   title,
   isEditMode,
   show_block_bg,
-  linkAlign,
   linkTitle,
   linkHref,
   slidesToShow = '1',
@@ -50,15 +207,12 @@ const SliderTemplate = ({
   autoplay = false,
   autoplay_speed = 2, //seconds
   reactSlick,
-  titleLine,
-  linkmore_id_lighthouse,
 }) => {
   const intl = useIntl();
-  const slider = useRef(null);
   const [userAutoplay, setUserAutoplay] = useState(autoplay);
   const nSlidesToShow = parseInt(slidesToShow);
   const Slider = reactSlick.default;
-
+  const { slider, focusNext } = useSlider(userAutoplay);
   const toggleAutoplay = () => {
     if (!slider?.current) return;
     if (userAutoplay) {
@@ -70,6 +224,50 @@ const SliderTemplate = ({
     }
   };
 
+  const renderCustomDots = (props) => {
+    // Custom handling of focus as per Arter a11y audit and request
+    return (
+      <ul
+        className="slick-dots"
+        aria-label={intl.formatMessage(messages.dots)}
+        title={intl.formatMessage(messages.dots)}
+      >
+        {props.map((item, index) => {
+          const El = item.type;
+          const children = item.props.children;
+          // Justified assumption: children is an Object and not an Array here
+          const Child =
+            children.type ||
+            function () {
+              return null;
+            };
+          return (
+            <El
+              className={`${item.props.className} slick-dot`}
+              tabIndex={-1}
+              title={intl.formatMessage(messages.slideDot, {
+                index: index + 1,
+              })}
+              aria-hidden={true}
+            >
+              <Child
+                {...children.props}
+                tabIndex={-1}
+                style={{ padding: 0 }}
+                title={intl.formatMessage(messages.slideDot, {
+                  index: index + 1,
+                })}
+                aria-label={intl.formatMessage(messages.slideDot, {
+                  index: index + 1,
+                })}
+              />
+            </El>
+          );
+        })}
+      </ul>
+    );
+  };
+
   const settings = {
     dots: show_dots,
     infinite: true,
@@ -86,8 +284,11 @@ const SliderTemplate = ({
     focusOnSelect: true,
     draggable: true,
     accessibility: true,
-    nextArrow: <NextArrow />,
-    prevArrow: <PrevArrow />,
+    nextArrow: <NextArrow intl={intl} focusNext={focusNext} />,
+    prevArrow: <PrevArrow intl={intl} focusNext={focusNext} />,
+    appendDots: renderCustomDots,
+    // Custom handling of focus as per Arter a11y audit and request
+    afterChange: focusNext,
     responsive: [
       {
         breakpoint: 980,
@@ -99,7 +300,6 @@ const SliderTemplate = ({
     ],
   };
 
-  //const getCaption = (item) => item.description ?? item.rights ?? null;
   return (
     <div
       className={cx(`sliderTemplate slidesToShow-${nSlidesToShow || 1}`, {
@@ -110,9 +310,7 @@ const SliderTemplate = ({
         {title && (
           <Row>
             <Col>
-              <h2 className={cx('mb-4', { 'title-bottom-line': titleLine })}>
-                {title}
-              </h2>
+              <h2 className="mb-4">{title}</h2>
             </Col>
           </Row>
         )}
@@ -126,12 +324,13 @@ const SliderTemplate = ({
             {items?.length > nSlidesToShow && (
               <div className="play-pause-wrapper">
                 <button
-                  onClick={() => toggleAutoplay()}
+                  onClick={toggleAutoplay}
                   title={
                     userAutoplay
                       ? intl.formatMessage(messages.pause)
                       : intl.formatMessage(messages.play)
                   }
+                  tabIndex={0}
                 >
                   <Icon
                     key={userAutoplay ? 'pause' : 'play'}
@@ -150,53 +349,24 @@ const SliderTemplate = ({
                   maxSize: 1600,
                   critical: true,
                 });
-                //if (!image) return null;
                 return (
-                  <div
-                    className="it-single-slide-wrapper"
-                    key={item['@id'] + index}
-                  >
-                    <div className="slide-wrapper">
-                      {image ? (
-                        <figure className="img-wrapper">{image}</figure>
-                      ) : (
-                        <div className="img-placeholder"></div>
-                      )}
-                      {show_image_title && (
-                        <UniversalLink
-                          item={item}
-                          title={intl.formatMessage(messages.viewImage)}
-                          className={'no-external-if-link'}
-                        >
-                          <div className="slide-title">
-                            {full_width ? (
-                              <Container>
-                                {item.title}{' '}
-                                <Icon icon="arrow-right" key="arrow-right-fw" />
-                              </Container>
-                            ) : (
-                              <>
-                                {item.title}{' '}
-                                <Icon icon="arrow-right" key="arrow-right" />
-                              </>
-                            )}
-                          </div>
-                        </UniversalLink>
-                      )}
-                    </div>
-                  </div>
+                  <Slide
+                    image={image}
+                    index={index}
+                    full_width={full_width}
+                    item={item}
+                    show_image_title={show_image_title}
+                    intl={intl}
+                    setUserAutoplay={setUserAutoplay}
+                    userAutoplay={userAutoplay}
+                    slider={slider}
+                  />
                 );
               })}
             </Slider>
           </div>
         </div>
-        <ListingLinkMore
-          title={linkTitle}
-          href={linkHref}
-          linkAlign={linkAlign}
-          className="my-4"
-          linkmoreIdLighthouse={linkmore_id_lighthouse}
-        />
+        <ListingLinkMore title={linkTitle} href={linkHref} className="my-4" />
       </Container>
     </div>
   );

package/src/components/ItaliaTheme/Breadcrumbs/Breadcrumbs.jsx

@@ -12,7 +12,7 @@ import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
 
 import { UniversalLink } from '@plone/volto/components';
-import { Row, Col, Breadcrumb, BreadcrumbItem } from 'design-react-kit';
+import { Row, Col, BreadcrumbItem } from 'design-react-kit';
 import GoogleBreadcrumbs from 'design-comuni-plone-theme/components/ItaliaTheme/Breadcrumbs/GoogleBreadcrumbs';
 
 const messages = defineMessages({
@@ -57,7 +57,7 @@ const Breadcrumbs = ({ pathname }) => {
                 </UniversalLink>
                 <span className="separator">/</span>
               </BreadcrumbItem>
-              {items.slice(0, -1).map((item, index, items) => (
+              {items.map((item, index, items) => (
                 <BreadcrumbItem tag="li" key={item.url}>
                   <UniversalLink href={item.url}>{item.title}</UniversalLink>
                   {index < items.length - 1 && (

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

@@ -25,6 +25,7 @@ import cx from 'classnames';
 import AnswersStep from './Steps/AnswersStep';
 import CommentsStep from './Steps/CommentsStep';
 import Rating from './Steps/Commons/Rating';
+import { PropTypes } from 'prop-types';
 
 const messages = defineMessages({
   title: {
@@ -111,10 +112,10 @@ const messages = defineMessages({
   },
 });
 
-const FeedbackForm = ({ contentType }) => {
+const FeedbackForm = ({ contentType, pathname }) => {
   const intl = useIntl();
   const location = useLocation();
-  const path = location.pathname ?? '/';
+  const path = pathname ?? location.pathname ?? '/';
   const dispatch = useDispatch();
   const [satisfaction, setSatisfaction] = useState(null);
   const [step, setStep] = useState(0);
@@ -124,11 +125,9 @@ const FeedbackForm = ({ contentType }) => {
   const submitResults = useSelector((state) => state.submitFeedback);
   const [validToken, setValidToken] = useState(null);
   const threshold = getFeedbackThreshold();
-  let fieldHoney = process.env.RAZZLE_HONEYPOT_FIELD;
-
-  if (__CLIENT__) {
-    fieldHoney = window.env.RAZZLE_HONEYPOT_FIELD;
-  }
+  const fieldHoney = __CLIENT__
+    ? window.env.RAZZLE_HONEYPOT_FIELD
+    : process.env.RAZZLE_HONEYPOT_FIELD;
 
   const numberOfSteps = useMemo(() => getNumberOfSteps(), []);
 
@@ -359,4 +358,9 @@ const FeedbackForm = ({ contentType }) => {
   );
 };
 
+FeedbackForm.propTypes = {
+  contentType: PropTypes.string,
+  pathname: PropTypes.string,
+};
+
 export default FeedbackForm;

package/src/components/ItaliaTheme/Footer/FooterPNRRLogo.jsx

@@ -5,8 +5,8 @@ const FooterPNRRLogo = () => {
   return config.settings.siteProperties.showNextGenerationEU ? (
     <img
       src={logoPNRR}
-      width="178"
-      height="56"
+      width="167"
+      height="41"
       alt="NextGenerationEU"
       loading="lazy"
       decoding="async"