design-comuni-plone-theme 11.26.4 → 11.27.0

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -6,7 +6,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import {
   richTextHasContent,
-  RichText,
   Metadata,
   HelpBox,
   GenericCard,
@@ -51,18 +50,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-      {richTextHasContent(content?.patrocinato_da) && (
-        <div className="mt-4">
-          {richTextHasContent(content?.patrocinato_da) && (
-            <div className="mb-5">
-              <RichText
-                title={intl.formatMessage(messages.patrocinato_da)}
-                data={content?.patrocinato_da}
-              />
-            </div>
-          )}
-        </div>
-      )}
       {content?.strutture_politiche?.length > 0 && (
         <div className="mt-4">
           <h3 className="h5">
@@ -91,11 +78,6 @@ EventoUlterioriInformazioni.propTypes = {
     ulteriori_informazioni: PropTypes.shape({
       data: PropTypes.string,
     }),
-    patrocinato_da: PropTypes.shape({
-      'content-type': PropTypes.string,
-      data: PropTypes.string,
-      encoding: PropTypes.string,
-    }),
     strutture_politiche: PropTypes.array,
     items: PropTypes.array,
   }).isRequired,

package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx

@@ -27,6 +27,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  eventoContent: {
+    id: 'eventoContent',
+    defaultMessage: "Contenuto dell'evento",
+  },
+});
+
 export const EventoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -53,6 +66,7 @@ export const EventoViewSectionsOrder = [
  */
 const EventoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -71,7 +85,10 @@ const EventoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -80,6 +97,8 @@ const EventoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.eventoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx

@@ -72,6 +72,8 @@ const SearchBar = ({ searchableText, setSearchableText }) => {
               }}
               type="text"
               aria-controls="faq-search-results-region"
+              role="search"
+              aria-label={intl.formatMessage(messages.search_faq)}
             />
           </div>
         </div>

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemText.jsx

@@ -16,6 +16,7 @@ const messages = defineMessages({
 
 const NewsItemText = ({ content }) => {
   const intl = useIntl();
+  if (typeof content !== 'object') return null;
 
   // NewsItem ha la descrizione_estesa (testo con blocchi)
   // altri CT (come i Comunicati Stampa) potrebbero avere `text`

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx

@@ -25,6 +25,18 @@ import {
   useSideMenu,
   useReadingTime,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  newsContent: {
+    id: 'newsContent',
+    defaultMessage: 'Contenuto della notizia',
+  },
+});
 
 export const NewsItemViewSectionsOrder = [
   {
@@ -49,6 +61,7 @@ export const NewsItemViewSectionsOrder = [
  */
 const NewsItemView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
   const { readingtime } = useReadingTime(content, documentBody);
 
@@ -75,13 +88,18 @@ const NewsItemView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.newsContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -57,6 +57,14 @@ const messages = defineMessages({
     id: 'related_uo',
     defaultMessage: 'Amministrazione',
   },
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  argomentoContent: {
+    id: 'argomentoContent',
+    defaultMessage: "Contenuto dell'argomento",
+  },
 });
 
 /**
@@ -85,13 +93,18 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.argomentoContent)}
           >
             {/* HEADER IMAGE */}
             <ContentImage content={content} position="documentBody" />

package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx

@@ -21,6 +21,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  personaContent: {
+    id: 'personaContent',
+    defaultMessage: 'Contenuto del profilo della persona',
+  },
+});
+
 export const PersonaViewSectionsOrder = [
   { /* RUOLO */ component: PersonaRuolo },
   { /* CONTATTI */ component: PersonaContatti },
@@ -36,6 +49,7 @@ export const PersonaViewSectionsOrder = [
  */
 const PersonaView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -52,13 +66,18 @@ const PersonaView = ({ content }) => {
           showtassonomiaargomenti={true}
         />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.personaContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx

@@ -5,7 +5,6 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   PageHeader,
@@ -40,6 +39,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  servizioContent: {
+    id: 'servizioContent',
+    defaultMessage: 'Contenuto del servizio',
+  },
+});
+
 export const ServizioViewSectionsOrder = (props) => [
   {
     /* HEADER IMAGE */
@@ -126,13 +138,18 @@ const ServizioView = ({ content, moment }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4 ">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.servizioContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/UOView/UOView.jsx

@@ -26,6 +26,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  UOContent: {
+    id: 'UOContent',
+    defaultMessage: "Contenuto dell'unità organizzativa",
+  },
+});
+
 export const UOViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -59,6 +72,7 @@ export const UOViewSectionsOrder = [
  */
 const UOView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -76,7 +90,10 @@ const UOView = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -85,6 +102,8 @@ const UOView = ({ content }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.UOContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/VenueView/VenueView.jsx

@@ -25,6 +25,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  venueContent: {
+    id: 'venueContent',
+    defaultMessage: 'Informazioni sulla struttura',
+  },
+});
+
 export const VenueViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -56,23 +69,18 @@ export const VenueViewSectionsOrder = [
  */
 const VenueView = ({ content }) => {
   const documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
-  useEffect(() => {
-    if (
-      content.nome_alternativo &&
-      !content.title?.includes(content.nome_alternativo)
-    ) {
-      content.subtitle = content.nome_alternativo;
-    }
-  });
-
   return (
     <>
       <div className="container px-4 my-4 luogo-view">
         <SkipToMainContent />
         <PageHeader
-          content={content}
+          content={{
+            ...content,
+            subtitle: content.nome_alternativo,
+          }}
           readingtime={null}
           showreadingtime={false}
           showdates={false}
@@ -82,7 +90,10 @@ const VenueView = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -91,6 +102,8 @@ const VenueView = ({ content }) => {
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.venueContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/SelectInput/SelectInput.jsx

@@ -92,6 +92,10 @@ const messages = defineMessages({
     id: 'dropdown_indicator',
     defaultMessage: 'Apri il menu',
   },
+  SelectInput_default_label: {
+    id: 'SelectInput_default_label',
+    defaultMessage: "Seleziona un'opzione",
+  },
 });
 
 const SelectContainer = injectLazyLibs('reactSelect')(({
@@ -313,14 +317,16 @@ const SelectInput = ({
   options,
   components = {},
   reactSelect,
+  labelledby,
   defaultValue,
 }) => {
   const intl = useIntl();
+  const labelDefined =
+    label || intl.formatMessage(messages.SelectInput_default_label);
   const Select = reactSelect.default;
   return (
     <div className="bootstrap-select-wrapper">
-      {label && <label htmlFor={id}>{label}</label>}
-
+      {label && <label htmlFor={!labelledby ? id : undefined}>{label}</label>}
       <Select
         components={{
           MenuList,
@@ -341,9 +347,9 @@ const SelectInput = ({
         isSearchable={isSearchable}
         isMulti={isMulti}
         isClearable={isClearable}
-        aria-label={label}
+        aria-label={labelDefined}
+        aria-labelledby={!label ? labelledby : undefined}
         aria-live="polite"
-        aria-labelledby={id}
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>
           intl.formatMessage(messages.select_noOptionsMessage)

package/src/components/TextInput.jsx

@@ -17,6 +17,7 @@ export default function TextInput(props) {
     groupClassName,
     ...otherProps
   } = props;
+
   const [isFocused, setIsFocused] = useState(false);
 
   const toggleFocusLabel = () => {

package/src/config/Blocks/ListingOptions/attachmentCardTemplate.js

@@ -10,7 +10,7 @@ const messages = defineMessages({
   show_pdf_desc: {
     id: 'show_pdf_desc',
     defaultMessage:
-      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.",
+      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata. Se non impostato, i PDF vengono scaricati.",
   },
 });
 

package/src/config/Blocks/ListingOptions/cardWithSlideUpTextTemplate.js

@@ -13,12 +13,7 @@ export const addCardWithSlideUpTextTemplateOptions = (
 ) => {
   let pos = position;
 
-  // hidden to avoid use of lighthouse on this block
-  // which creates problems with asseverazione
-  // 1. clients instructed not to use this variation when data-element is needed
-  // 2. planned intervention to change structure of variation to allow use of
-  //    data element without wrapping entire card in link
-  // pos = addLighthouseField(schema, intl, pos);
+  pos = addLighthouseField(schema, intl, pos);
 
   pos = addDefaultOptions(schema, formData, intl, pos);
 

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,6 +5,7 @@
  * CUSTOMIZATIONS:
  * - aggiunto icona per link esterni
  * - aggiunto title informativo per link esterni
+ * - aggiunta la condizione su @@display-file e @download-file per gestire i casi in cui questi parametri vengono imposti a monte
  */
 
 import React from 'react';
@@ -59,18 +60,21 @@ const UniversalLink = ({
       }
 
       //case: item of type 'File'
-      if (
-        !token &&
-        config.settings.downloadableObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@download/file`;
-      }
+      if (!url.includes('@@download') && !url.includes('@@display-file')) {
+        //se non è gia stato aggiunto il suffisso per il download nell'@id dell'item
+        if (
+          !token &&
+          config.settings.downloadableObjects.includes(item['@type'])
+        ) {
+          url = `${url}/@@download/file`;
+        }
 
-      if (
-        !token &&
-        config.settings.viewableInBrowserObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@display-file/file`;
+        if (
+          !token &&
+          config.settings.viewableInBrowserObjects.includes(item['@type'])
+        ) {
+          url = `${url}/@@display-file/file`;
+        }
       }
     }
   }

package/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -409,8 +409,8 @@ class RecurrenceWidget extends Component {
                 formValues['freq'] = FREQUENCES.MONDAYFRIDAY;
               } else
                 formValues[option] = value.map((d) => {
-                      return this.getWeekday(d);
-                    });
+                  return this.getWeekday(d);
+                });
             }
             break;
           case 'bymonthday':
@@ -441,8 +441,11 @@ class RecurrenceWidget extends Component {
               if (freq === FREQUENCES.YEARLY) {
                 formValues['yearly'] = 'byday';
               }
+              const weekday = this.getWeekday(value[0][0]);
+              weekday.n = value[0][1];
               formValues['weekdayOfTheMonth'] = value[0][0];
               formValues['weekdayOfTheMonthIndex'] = value[0][1];
+              formValues['byweekday'] = weekday;
             }
             break;
           case 'bymonth':

package/src/customizations/volto/components/theme/Navigation/Navigation.jsx

@@ -93,7 +93,12 @@ const Navigation = ({ pathname }) => {
   return (
     <Header theme="" type="navbar">
       {menu?.length > 0 ? (
-        <HeaderContent expand="lg" megamenu id="navigation">
+        <HeaderContent
+          expand="lg"
+          megamenu
+          id="navigation"
+          aria-label={intl.formatMessage(messages.mainMenu)}
+        >
           <HeaderToggler
             aria-controls="it-navigation-collapse"
             aria-expanded={collapseOpen}
@@ -142,7 +147,12 @@ const Navigation = ({ pathname }) => {
                   </UniversalLink>
                 </div>
                 {/* Main Menu */}
-                <Nav data-element="main-navigation" navbar role="menubar">
+                <Nav
+                  data-element="main-navigation"
+                  navbar
+                  role="menubar"
+                  aria-label={intl.formatMessage(messages.mainMenu)}
+                >
                   {menu
                     ?.filter((item) => item.visible)
                     ?.map((item, index) => (
@@ -206,6 +216,10 @@ const messages = defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  mainMenu: {
+    id: 'mainMenu',
+    defaultMessage: 'Menu principale',
+  },
 });
 
 Navigation.propTypes = {

package/src/customizations/volto/components/theme/View/ListingView.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { PageHeader } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { ListingImage } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 /**
  * List view component class.
@@ -23,8 +24,7 @@ const ListingView = ({ content }) => (
     <PageHeader content={content} />
     <section id="content-core">
       {content.items.map((item) => {
-        const image = ListingImage({ item });
-
+        const hasImage = contentHasImage(item);
         return (
           <div key={item.url} className="listing-item my-4">
             <div>
@@ -35,7 +35,7 @@ const ListingView = ({ content }) => (
               </h2>
               {item.description && <p>{item.description}</p>}
             </div>
-            {image && <>{image}</>}
+            {hasImage && <ListingImage item={item} />}
           </div>
         );
       })}

package/src/customizations/volto/helpers/FormValidation/FormValidation.js

@@ -100,11 +100,14 @@ const widgetValidation = {
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
       var urlRegex = new RegExp(
-        '^(https?:\\/\\/)?' + // validate protocol
-          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
-          '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
-          '(localhost)' + // validate OR localhost address
-          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+          '^(https?:\\/\\/)?' + // optional protocol
+          '(' +
+            '([a-z\\d]+(-[a-z\\d]+)*\\.)+[a-z]{2,}|' +  // validate domain name
+            '((\\d{1,3}\\.){3}\\d{1,3}))|' + // OR ip (v4) address
+            '(localhost)' + // OR localhost
+          ')' +
+          '(\\:\\d+)?' + // optional port
+          '(\\/[-a-z\\d%_.~+]*)*' + // path
           '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
           '(\\#[-a-z\\d_]*)?$', // validate fragment locator
         'i',